Open xxholly32 opened 5 years ago
用vscode也有个几个年头了,最早用文本编辑器editplus和后面的sublime,直到现在的vscode基本上每天工作已经离不开了;
vscode,免费,开源,使用简单,占资源少,丰富的插件功能,页面很赞,快捷键很舒服;
功能强大的而且简单到不能再简单,如果你不知道怎么用打开,然后运行ctrl+shift+p;随便输入什么都可以找到你要的答案,比如快捷键;
vscode最强打的就是插件系统,我引入一些我平时用到的,如果还有一些好的可以留言给我。
vscode内嵌的一款插件,简易编写html语言,采用tab切换使用
比如,输入一下字符:
ul#nav>li.item$*4>a{Item $}
...可以自动生成相对应html语言:
<ul id="nav">
<li class="item1"><a href="">Item 1</a></li>
<li class="item2"><a href="">Item 2</a></li>
<li class="item3"><a href="">Item 3</a></li>
<li class="item4"><a href="">Item 4</a></li>
</ul>
ESlint 接管原生 js 提示,可以自定制提示规则。Vetur 则是Vue官方推荐的编辑器支持插件;prettier可以加入eslint校验,formatOnSave可以自动在项目保存的时候进行代码的formatter操作;3件套让你的代码变的整洁、美观;以下是我个人的配置;
// setting.json
{
// #设定tabsize为2个空格
"editor.tabSize": 2,
// #每次保存的时候自动格式化
"editor.formatOnSave": true,
// #每次保存的时候将代码按eslint格式进行修复
"eslint.autoFixOnSave": true,
// 添加 vue 支持
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
],
// #让prettier使用eslint的代码格式进行校验
"prettier.eslintIntegration": true,
"vetur.validation.template": false
}
Snippets的功能和emmet差不多,还有html snippets,react snippets;知道一些快捷键可以很快速的写一些空的页面或者函数;还有一个vue 2 snippets具体我还没仔细看过,貌似下载次数比这个高。
这个是我们组刘梦同学开发的vscode插件,如要是做方法注释用的;还有一个document this的插件,适用于全局的注释;他还有一款vue i18n helper的插件用于检验vue文件中是否包含多语言的,配合相关也有eslint的插件有兴趣的可以关注一下;
有时候我们写代码会不知道括号的结尾在哪里,没有对应的终线,这个是很好的利器,支持多括号的颜色区分;
在代码中标注我们想做和需要做的事情,可以用不同的颜色分别标注在注释中;支持自定义颜色和关键字;
在官网搜索排行我们就可以看到一些比较著名的主题了,https://marketplace.visualstudio.com/search?target=VSCode&category=Themes&sortBy=Downloads,有material,这个就中规中矩,on dark,这个色彩会更多一些,还有一款winter is coming,里面的值都是白色,有股淡淡的忧伤。
我这边要推荐的是dracula,淡淡的紫色底,颜色也显得多彩;特别是关键字变成了暗粉色,特别的舒服;
还有一套是owl night,在d2开发大会上一个大神使用的,我看了下也不错;真实效果比图片暗一丢丢。
什么你要背景是白色的?不好意思,没有共同语言
字体普遍推荐的是Operator Mono Book 和 Dank Mono,不过2个都收费;我比较喜欢dank mono的f和l的写法,不过s的写法就比较蛋疼了;所以还是用的是默认字体,如果有好的字体也可以推荐给我。
项目的整体目标
① 明确目标
② 形成解决思路
③ 执行
④ 总结