VSCode 插件与配置推荐

在如今的前端时代,工具链已是开发中必不可少的一环。Sublime 的闭源,Atom 的启动性能较差,以及随着 VSCode 的逐渐成熟,它已经成为前端开发中必不可少的神器。
在 VSCode 中,通过配置以及丰富的插件,可以让你在敲代码时有事半功倍的效果。

持续更新中…

配置

在 VSCode 中,自带支持 emmet 语法,但是默认是关闭的,在首选项中进行如下配置

1
"emmet.triggerExpansionOnTab": true

在 jsx 中写标签不能快速补全,可配置

1
2
3
"emmet.includeLanguages": {
"javascript": "javascriptreact"
}

在编写某类语言代码时,配置 2 格 tab,粘贴和保存时自动修正格式
[] 内写语言,例如 html, css, less, typescript, javascriptreact等

1
2
3
4
5
"[javascript]": {
"editor.tabSize": 2,
"editor.formatOnPaste": false,
"editor.formatOnSave": false
}

使用 eslint 格式化代码, 我使用了 standard 风格的 eslint

1
2
3
4
5
6
7
8
9
10
11
12
13
14
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
"vue"
],
"eslint.options": {
"extensions": [
".js",
".vue"
]
},
"standard.autoFixOnSave": true

在项目中新增 .eslintrc 文件,里面的规则会覆盖在编辑器设置的规则,所以不用担心你个人的eslint配置会影响到项目
保证开启 eslint 的 autoFixOnSave,Ctrl + S 效果如下

使对应扩展名的文件使用特定的语言

1
2
3
4
5
6
7
8
"files.associations": {
"*.tpl": "html",
"*.cjson": "jsonc",
"*.wxss": "css",
"*.wxs": "javascript",
".**rc": "json",
".sequelizerc": "javascript"
}

全局搜索中排除的文件

1
2
3
4
5
6
"search.exclude": {
"**/node_modules": true,
"**/bower_components": true,
"**/dist": true,
"**/dest": true
}

插件

快捷键

  • Command + d 选中一个单词后,使用该快捷键再选中下一个相同单词,可以一直下去
  • Command + u 取消选中下一个匹配单词
  • Command + 鼠标左键 可显示多光标
  • fn + f12 跳转到函数定义的位置
  • Alt + → 按照单词移动光标
  • Ctrl + Alt + → 按照单词大小写移动光标
  • Alt + Commond + ↓ 出现多行光标

自定义快捷键

  • Command + m 控制 minimap 的出现于隐藏
  • Command + \ 控制 sidebar 的出现于隐藏
  • Command + , 打开设置
  • Command + . 打开用户设置