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

101

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

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

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

什么是 ESLint

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

安装 ESLint 扩展

安装环境

安装 ESLint 扩展

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

图片描述

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

安装 ESLint

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

$ npm install eslint --save-dev

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

这里我们使用全局安装:

$ npm install -g eslint

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

图片描述

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

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

module.exports = {
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "sourceType": "module"
    },
    "rules": {
        "indent": [
            "error",
            4
        ],
        "linebreak-style": [
            "error",
            "windows"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "never"
        ]
    }
};

配置 ESLint

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

配置环境

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

"env": {
    "browser": true,
    "commonjs": true,
    "es6": true,
    "jquery": true
}

设置语言选项

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

"parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
        "jsx": true
    }
}

配置规则

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

  • "off"0 - 关闭规则

  • "warn"1 - 将规则视为一个警告

  • "error"2 - 将规则视为一个错误

"rules": {
    "indent": [
        "error",
        4
    ],
    "linebreak-style": [
        "error",
        "windows"
    ],
    "quotes": [
        "error",
        "single"
    ],
    "semi": [
        "error",
        "never"
    ]
}

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

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

设置 ESLint 扩展

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

图片描述

图片描述

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

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

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

让 ESLint 支持 Vue 单文件组件

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

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

$ npm install -g eslint-plugin-html

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

"eslint.options": {
    "configFile": "E:/git/github/styleguide/eslint/.eslintrc.js",
    "plugins": ["html"]
},
"eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    "vue"
]

图片描述

最后,我们打开一个 vue 文件,可以发现 ESLint 扩展已经正常工作了,嗯,enjoy yourself (●ˇ∀ˇ●)

你可能感兴趣的

14 条评论
阿升 · 2017年04月18日

我想问下你们有没有试过这个插件的autofix功能,我尝试了下autofix,发现它在vue文件下出现修复bug

+1 回复

0

"eslint.validate": [

"javascript",
"javascriptreact"
, { "language": "html", "autoFix": true }
, { "language": "vue", "autoFix": true }

],

建兰 · 2017年06月15日
0

@建兰 谢谢大佬

阿升 · 2017年06月17日
0

@建兰 如何使用这个autofix,有快捷键吗?我配置了,但是不会用,不晓得如何自动fix

dreamDX · 2018年07月09日
zelinDavid · 2017年12月07日

专门申请了个账号,感谢你的分享,你是对的;另外提个小建议,能否写的再小白一点,比如重复的本地和全局安装后报错该如何处理。我就是重复安装了弄了好几个小时,最后删了项目重新安装的就对了。感谢感谢

回复

0

@zelinDavid 谢谢,感觉已经写得很小白了?不过没遇到过你的问题

hardylin 作者 · 2017年12月25日
坏牧羊人 · 2018年03月27日

不明白为什么。即使安装这个教程来一步一步使用eslint,我的vscode依旧无法使用eslint,每次打开vscode都会提示我,The ESLint server crashed 5 times in the last 3 minutes. The server will not be restarted.,每一次都报这个错误

回复

0

我也是这个问题,如果你解决了告诉我一下好不

skt_faker · 2018年04月20日
0

很可能是node进程未彻底干掉,任务管理器中 彻底杀掉node,然后重启vscode

ifredom · 2018年05月05日
0

vscode更新到最新版本看一下

lemonbigpig · 2018年11月18日
yeqianyi123 · 2018年05月19日

不知道是否有遇过.vue文件中包含两个script标签第二个script标签不会进行验证提示的问题?

回复

Benes · 2018年08月27日

楼主,你好,我通过configFile指定了eslint配置文件,在普通的文件可以正常使用,在有本地.eslint文件的项目发现全局安装的插件找不到,发现是从eslint插件直接从local的node_modules中查看npm包,但是使用的还是全局的配置文件,导致找不到plugin,有配置项可以直接指定node_modules的目录吗

回复

星空 · 1月10日

按着楼主的做法,中间出了点小问题。.vue文件报错 "Parsing error: Unexpected token <",显然没有将vue文件识别出来。试着网上其他方法,也没有解决这个问题,反而有时完全不报错,有时只报这个错。大伙可有解决方案

回复

载入中...