使用 VSCode + ESLint 实践前端编码规范

在团队的项目开发过程中，代码维护所占的时间比重往往大于新功能的开发。因此编写符合团队编码规范的代码是至关重要的，这样做不仅可以很大程度地避免基本语法错误，也保证了代码的可读性，毕竟：

程序是写给人读的，只是偶尔让计算机执行一下。—— Donald Knuth

本文将讲解如何在 VSCode 中配合 ESLint 扩展来实践团队内部的前端编码规范。

• 前端编码规范
• ESLint 完整配置文件
  
  

什么是 ESLint

ESLint （ 中文站点 ）是一个开源的 JavaScript 代码检查工具，使用 Node.js 编写，由 Nicholas C. Zakas 于 2013 年 6 月创建。ESLint 的初衷是为了让程序员可以创建自己的检测规则，使其可以在编码的过程中发现问题而不是在执行的过程中。ESLint 的所有规则都被设计成可插入的，为了方便使用，ESLint 内置了一些规则，在这基础上也可以增加自定义规则。

安装 ESLint 扩展安装环境

• VSCode V1.11.1
• Windows 10
  
  

安装 ESLint 扩展

首先，打开 VSCode 扩展面板并搜索 ESLint 扩展，然后点击安装

安装完毕之后点击 重新加载 以激活扩展，但想要让扩展进行工作，我们还需要先进行 ESLint 的安装配置。

安装 ESLint

如果你仅仅想让 ESLint 成为你项目构建系统的一部分，我们可以在项目根目录进行本地安装：

1. $ npm install eslint --save-dev

复制代码

如果想使 ESLint 适用于你所有的项目，我们建议使用全局安装，使用全局安装 ESLint 后，你使用的任何 ESLint 插件或可分享的配置也都必须在全局安装。

这里我们使用全局安装：

1. $ npm install -g eslint

复制代码

安装完毕后，我们使用 eslint --init 命令在用户目录中生成一个配置文件（也可以在任何你喜欢的位置进行生成）

我们在第一个选项中选择自定义代码风格，之后根据需要自行选择。

设置完成后我们会得到一份文件名为 .eslintrc.js 的配置文件：

1. module.exports = {
   
2.     "env": {
   
3.         "browser": true,
   
4.         "commonjs": true,
   
5.         "es6": true
   
6.     },
   
7.     "extends": "eslint:recommended",
   
8.     "parserOptions": {
   
9.         "sourceType": "module"
   
10.     },
    
11.     "rules": {
    
12.         "indent": [
    
13.             "error",
    
14.             4
    
15.         ],
    
16.         "linebreak-style": [
    
17.             "error",
    
18.             "windows"
    
19.         ],
    
20.         "quotes": [
    
21.             "error",
    
22.             "single"
    
23.         ],
    
24.         "semi": [
    
25.             "error",
    
26.             "never"
    
27.         ]
    
28.     }
    
29. };

复制代码

配置 ESLint

配置文件生成之后，我们接着可以进行自定义修改，这里我们只粗略讲解常用的配置想，完整的可配置项可访问 官方文档

配置环境

在上文生成的配置文件中可以使用 env 属性来指定要启用的环境，将其设置为 true ，以保证在进行代码检测时不会把 这些环境 预定义的全局变量识别成未定义的变量而报错：

1. "env": {
   
2.     "browser": true,
   
3.     "commonjs": true,
   
4.     "es6": true,
   
5.     "jquery": true
   
6. }

复制代码

设置语言选项

默认情况下，ESLint 支持 ECMAScript 5 语法，如果你想启用对 ECMAScript 其它版本和 JSX 等的支持，ESLint 允许你使用 parserOptions 属性进行指定想要支持的 JavaScript 语言选项 ，不过你可能需要自行安装 eslint-plugin-react 等插件。

1. "parserOptions": {
   
2.     "ecmaVersion": 6,
   
3.     "sourceType": "module",
   
4.     "ecmaFeatures": {
   
5.         "jsx": true
   
6.     }
   
7. }

复制代码

配置规则

在上文的配置文件中， "extends": "eslint:recommended" 选项表示启用推荐规则，在推荐规则的基础上我们还可以根据需要使用 rules 新增自定义规则，每个规则的第一个值都是代表该规则检测后显示的错误级别：

• "off" 或 0 - 关闭规则
• "warn" 或 1 - 将规则视为一个警告
• "error" 或 2 - 将规则视为一个错误
  
  

1. "rules": {
   
2.     "indent": [
   
3.         "error",
   
4.         4
   
5.     ],
   
6.     "linebreak-style": [
   
7.         "error",
   
8.         "windows"
   
9.     ],
   
10.     "quotes": [
    
11.         "error",
    
12.         "single"
    
13.     ],
    
14.     "semi": [
    
15.         "error",
    
16.         "never"
    
17.     ]
    
18. }

复制代码

完整的可配置规则列表可访问： http://eslint.cn/docs/rules/

其中带 √ 标记的表示该规则为推荐规则。

设置 ESLint 扩展

安装并配置完成 ESLint 后，我们继续回到 VSCode 进行扩展设置，依次点击 文件 > 首选项 > 设置 打开 VSCode 配置文件

从左侧系统设置中可以看到，ESLint 扩展默认已经启用，我们现在只需在右侧用户设置中添加配置来指定我们创建的 .eslintrc.js 配置文件路径即可启用自定义规则检测，ESLint 会查找并自动读取它们：

1. "eslint.options": {
   
2.     "configFile": "E:/git/github/styleguide/eslint/.eslintrc.js"
   
3. },

复制代码

至此，我们已经可以使用 ESLint 扩展来检测我们的 js 文件了。

让 ESLint 支持 Vue 单文件组件

由于 ESLint 默认只支持 js 文件的脚本检测，如果我们需要支持类 html 文件（如 vue ）的内联脚本检测，还需要安装 eslint-plugin-html 插件。

因为我们使用全局安装了 ESLint，所以 eslint-plugin-html 插件也必须进行全局安装：

1. $ npm install -g eslint-plugin-html

复制代码

安装完成后，我们再次打开 文件 > 首选项 > 设置 ，在右侧用户设置中修改 ESLint 的相关配置并保存：

1. "eslint.options": {
   
2.     "configFile": "E:/git/github/styleguide/eslint/.eslintrc.js",
   
3.     "plugins": ["html"]
   
4. },
   
5. "eslint.validate": [
   
6.     "javascript",
   
7.     "javascriptreact",
   
8.     "html",
   
9.     "vue"
   
10. ]

复制代码

最后，我们打开一个 vue 文件，可以发现 ESLint 扩展已经正常工作了，嗯，enjoy yourself ！

查看原文： 使用 VSCode + ESLint 实践前端编码规范