ESLint 作为ECAMScript和JavaScript 代码识别检查工具,为我们在开发过程中提供了很大的帮助,也为我们在多人协作编程的时候,提供了统一的代码风格限制方式,减少了我们在多人编写并提交同一个文件的时候,尽量减少冲突的出现次数。如果只是一个人书写代码,也能为我们提供很好的代码规范。
尽量在项目初始阶段就使用代码检查、代码风格的规范插件工具。
使用npm安装ESLint
首先是安装eslint的插件包
npm install eslint --save-dev
然后我们可以使用命令创建eslint的配置文件
npx eslint --init
根据一步一步的提示,你会得到一个配置文件 .eslintrc
这个时候,eslint的一些基础配置就已经出来了,但是我们在书写项目中的js或ts文件的时候并不会出现自动提示,那是因为VScode工具并没有支持ESLint,所以我们还需要安装VScode的插件工具ESLint。
VScode工具安装ESLint扩展工具
我们只要点击安装之后,稍等一会,我们如果在js文件中书写一个不规范的代码或代码风格,这个时候工具就会出现自动提示,辅助我们进行规范的编程风格。
有的时候我们会觉得这些东西并没有多大的用处,但我们在协同开发的时候,如果没有一个统一的规范进行限制,会出现很多这样或那样的问题。
设置VScode保存文件时,自动按照ESLint风格格式化文件
可以看到上图是打开的设置选项的页面,文件--首选项--设置。
扩展插件ESLint的图形设置页面,就在这里进行设置,我们可以点击标号2处的按钮切换到Setting.json文件进行手动设置。
将下面的代码,复制到Setting.json文件的最后面,或对应代码处,这个时候再保存对应的文件,就可以自动按照ESLint风格进行保存了。
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}