一、 安装
1、全局安装
npm i -g eslint
- 1
专注app软件定制开发全局安装的好处是,专注app软件定制开发在任何项目我们都可以使用的全局命令进行代码规则操作,但是这对我们的意义并不大,后续会详细介绍;
全局安装之后,要求相关的eslint插件页必须全局安装,这对多人开发项目来说会比项目安装更加繁琐。所以,我们这里采用在项目上安装eslint:
2、项目安装(亲测)
npm i -D eslint
- 1
安装完成如下图所示
二、初始化Eslint配置
1、生成.eslintrc.js文件
npx eslint --init
- 1
可以使用 ./node_modules/.bin/eslint --init 创建文件
.eslintrc.* 文件支持 .js . .yal .json等格式的配置文件,这里使用 .js文件
在 package.json 里创建一个 eslintConfig 属性,在那里,同样可以定义你的配置
如果 .eslintrc.js 和 package.json里的 eslintConfig 同时存在,则只读取 .eslintrc.js文件
如果 报错可以尝试运行npm install npx
选择你所需的配置
初始化成功如图所示
结束之后会在你的项目下生成一个.eslintrc.js文件,如图所示
2、简单配置规则
"rules": { 'indent': [2, 2], // 强制使用一致的缩进 'eqeqeq': [2, 'always'], // 要求使用 === 和 !== 'semi': [2, 'never'], // 要求或禁止使用分号代替 ASI 'quotes': [2, 'single'] // 强制使用一致的反勾号、双引号或单引号 }
- 1
- 2
- 3
- 4
- 5
- 6
官方详细规则文档:
三、扩展事项
1、.eslintignore 忽略文件
在项目根目录创建一个 .eslintignore 文件告诉 ESLint 去忽略特定的文件和目录。
步骤:
- .eslintignore 文件是一个纯文本文件,其中的每一行都是一个 glob 模式表明哪些路径应该忽略检测。如:
/dist//*.js
- 1
- 2
- eslint总是忽略
/node_modules/\*
和/bower_components/\*
中的文件
2、VsCode中保存自动格式化
左下角点击设置图标—>设置—>右上角打开设置的json文件
在json文件中添加一项规则
"editor.codeActionsOnSave": { "source.fixAll.eslint": true }
- 1
- 2
- 3
如图
保存后即可生效