入行到如今，先后折腾过无数的代码编辑器，大概有 sublime、webstorm、hBuilder、webstorm、eclipse、webstorm，vscode。工欲善其事必先利其器，在和如此多的编辑器打交道后，我先下只有 vscode 能够提升开发的幸福感。

无论是 vscode 的轻量感还是它的可配置性、拓展性都能给我带来很大的体验。下面我会从 vscode 入手阶段分享我对其外观配置、风格检查、编码效率、功能增强等方面说一说我是怎么去配置 vscode 去提升我的编码幸福度感！

  1. 外观配置

外观的配置能够最大限度的提升编程的幸福感，我会主要从编辑器的主题配色、图标方面考虑。下图是我的 vscode 的主题、图标的配置，当然每个人有每个人的喜好，我提供的仅供参考：


vue3 用less 还是scss_代码片段


  • 颜色主题：Monokia，vscode 以内置，可 command + k command + t 直接选择
  • 图标：vscode-icons，会给不同的文件类型，展示不同的图标，是文件层级也很直观
  • 字体：字体我用的是系统自带的，如有需要可以按照相关教程配置

编辑器的颜色主题、图标、字体的配置，会给开发者带来最直观的视觉体验，最大程度的提升开发的幸福感。

2. 风格检查

团队协作开发都会注重编程的规范和风格的统一，对于前端开发而言，无非是对 HTML、CSS、Javascript、JSON、Typescript、Markdown 的规范，安装对应的 Lint 工具即可：

  • Eslint：插件化的代码检测工具，可以自定义代码检测规则，详细规范
  • TsLint：Typescript 验证
  • Markdownlint：规范的 Markdown 语法，能大限度的避免由于语法不规范造成的解析异常问题

代码上除了上面的 Lint 工具，还可以使用 EditorConfig 插件，可以通过简单的配置来避免团队成员使用不同的 IDE、不同平台的造成的文件的编码格式、代码的缩进方式造成的代码混乱，以下是项目中常用的配置：


# https://editorconfig.org
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

[*.md]
insert_final_newline = false
trim_trailing_whitespace = false


有了代码的风格检查后，自然会有按照配置来格式化代码的工具，推荐工具如下：

  • Prettier：几乎支持格式化前端所有代码，并支持通过文件来配置规则
  • Vetur：格式化 .vue 文件，包括里面的 HTML、CSS

3. 编码效率

合理的使用 代码片段 和 自动补全

代码片段

代码片段 Snippets，主流的浏览器都支持，其原理是将常见的代码块抽离，通过几个按键匹配展开 N 行代码，代码片段的积累一方面要根据个人习惯，另一方面要更具社区学习良好的编码风格，常用的插件如下：

  • JavaScript (ES6) code snippets：提供常用的 ES6 代码片段
  • HTML Snippets：提供各种 HTML 标签片段
  • Element UI Snippets：提供 ElementUI 常用代码片段

自动补全

自动补全实质上和代码片段类似，但是在某些特殊场景下会以用户的输入作为启发式信息提供可能要输入的建议，常用工具如下：

  • Emmet：从 sublim 用至今，它可以把类 CSS 的选择符展开成 HTML 标签，目前 vscode 已经内置，详细介绍参考文档
  • Auto Close Tag：适用于 HTML、Vue、JSX，在打开标签并输入 </ 时候能够自动不全要闭合的标签
  • IntelliSense for CSS class names in HTML：CSS 类名补全，会自动扫描项目里的 css 类名，在输入类名时智能提示
  • Auto Rename Tag：适用于 HTML、Vue、JSX，修改标签名称时，只需要修改开始（结束）的标签，它会对应帮我们修改结束（开始）的标签
  • Path Intellisense：文件路径补全，引入文件时会智能提示和自动完成

4. 功能增强

除了上述的提升开发效率的配置外，我还安装了下面的一些插件：

  • Bracket Pair Colorizer：识别代码中的括号，并标记不同的颜色，当代码多层嵌套时，这简直是开发的福音
  • Code Runner：代码一键运行，支持 40 多种代码
  • Document This：自动添加代码注释
  • GitLens：git 源代码管理插件
  • open in browser：在浏览器中打开文件

结语

开发中，合理的使用各种配置、工具，能够将复杂的事情简单化极大的提升工作效率。

欢迎推荐你在开发中用到的能够提升开发效率的工具。