Eslint安装配置教程

发布时间:2023-03-11 09:30

一、 安装

1、全局安装

npm i -g eslint

全局安装的好处是,在任何项目我们都可以使用eslint的全局命令进行代码规则操作,但是这对我们的意义并不大,后续会详细介绍;
全局安装之后,要求相关的eslint插件页必须全局安装,这对多人开发项目来说会比项目安装更加繁琐。所以,我们这里采用在项目上安装eslint:

2、项目安装(亲测)

npm i -D eslint

安装完成如下图所示
\"在这里插入图片描述\"

二、初始化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 去忽略特定的文件和目录。
步骤:

  • .eslintignore 文件是一个纯文本文件,其中的每一行都是一个 glob 模式表明哪些路径应该忽略检测。如:
/dist/
/*.js
  • eslint总是忽略 /node_modules/\\*/bower_components/\\* 中的文件

2、VsCode中保存自动格式化
左下角点击设置图标—>设置—>右上角打开设置的json文件
\"在这里插入图片描述\"
在json文件中添加一项规则

    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }

如图
\"在这里插入图片描述\"
保存后即可生效

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号