发布时间:2023-03-11 09:30
1、全局安装
npm i -g eslint
全局安装的好处是,在任何项目我们都可以使用eslint的全局命令进行代码规则操作,但是这对我们的意义并不大,后续会详细介绍;
全局安装之后,要求相关的eslint插件页必须全局安装,这对多人开发项目来说会比项目安装更加繁琐。所以,我们这里采用在项目上安装eslint:
2、项目安装(亲测)
npm i -D eslint
安装完成如下图所示
1、生成.eslintrc.js文件
npx eslint --init
可以使用 ./node_modules/.bin/eslint --init 创建文件
.eslintrc.* 文件支持 .js .yaml .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、.eslintignore 忽略文件
在项目根目录创建一个 .eslintignore 文件告诉 ESLint 去忽略特定的文件和目录。
步骤:
/dist/
/*.js
/node_modules/\\*
和 /bower_components/\\*
中的文件2、VsCode中保存自动格式化
左下角点击设置图标—>设置—>右上角打开设置的json文件
在json文件中添加一项规则
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
如图
保存后即可生效