ESLint配置指南

配置ESLint有利于保证JS代码的规范性，并能避免一些低级的代码错误，对于团队开发大有裨益。如下以Vue项目中的ESlint为例，详细给你们介绍其使用方法。html

1、安装

安装命令

//开发环境中安装依赖
//npm
npm i ESlint -D
//yarn
yarn add --dev ESlint
复制代码

2、文件准备

建立 ESlint 所需文件

在根目录下建立.eslintrc.js配置文件及.eslintignore忽略文件前端

3、建立配置

1. 建立格式化参考规则

在.eslintrc.js中写入如下内容：vue

module.exports = {

  env: {//指定解析环境
    browser: true,
    node: true,
    commonjs: true,
  },
  extends: [////规则扩展，部分扩展须要单独下载
    'eslint:recommended',
    'plugin:vue/recommended',
    'plugin:prettier/recommended', //避免与 prettier 冲突
  ],
  parserOptions: {//指定解析方式
    ecmaVersion: 2021,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },
  rules: {
  //rules中的2表明警告，1表明更为严格的抛出错误
    'no-await-in-loop': 2,//循环中不能出现await
    'no-console': 1,//
    'no-debugger': 1,
    'no-func-assign': 0,
    'no-template-curly-in-string': 1, //常规字符串中禁止使用模板字符串方法
    'default-case': 1, //switch中必须具备default
    'no-alert': 2,
    'vue/attribute-hyphenation': [2, 'never'], //自定义组件中的属性应为小驼峰命名，除data-之类的以外
    'vue/component-definition-name-casing': [2, 'PascalCase'], //vue script自定义组件的name应为大驼峰形式
    'vue/component-name-in-template-casing': [2, 'kebab-case'], //vue html中的组件应为连字符形式
    'vue/html-quotes': [2, 'double'], //vueHTml中使用单引号
    'vue/prop-name-casing': [2, 'camelCase'], //自定义属性使用小驼峰
    'vue/attributes-order': [
      1,
      {
        order: [
          'DEFINITION',
          'LIST_RENDERING',
          'CONDITIONALS',
          'RENDER_MODIFIERS',
          'GLOBAL',
          ['UNIQUE', 'SLOT'],
          'TWO_WAY_BINDING',
          'OTHER_DIRECTIVES',
          'OTHER_ATTR',
          'EVENTS',
          'CONTENT',
        ],
        alphabetical: false,
      },
    ], //vue-html中的属性顺序
    'vue/component-tags-order': [
      2,
      {
        order: [['template', 'script'], 'style'],
      },
    ], //vue中的标签顺序
    'vue/order-in-components': [
      1,
      {
        order: [
          'el',
          'name',
          'key',
          'parent',
          'functional',
          ['delimiters', 'comments'],
          ['components', 'directives', 'filters'],
          'extends',
          'mixins',
          ['provide', 'inject'],
          'ROUTER_GUARDS',
          'layout',
          'middleware',
          'validate',
          'scrollToTop',
          'transition',
          'loading',
          'inheritAttrs',
          'model',
          ['props', 'propsData'],
          'emits',
          'setup',
          'asyncData',
          'data',
          'fetch',
          'head',
          'computed',
          'watch',
          'watchQuery',
          'LIFECYCLE_HOOKS',
          'methods',
          ['template', 'render'],
          'renderError',
        ],
      },
    ], //vue-script中的属性顺序
    'vue/this-in-template': 2, //vue-html中不容许存在this
  },
};

复制代码

eslint:recommended 插件中其实包含了不少的规则，详见官网node

2. 配置忽略文件

在.eslintignore中写入如下内容：git

// 忽略以下文件夹(主要为静态资源、打包后的文件）
build
src/assets
public
dist

复制代码

4、格式化文档

1. 命令行格式化检测并修复指定文档

eslint --fix src/components/HelloWorld.js
复制代码

2. 利用编辑器插件进行格式化

(1) 在VS Code中搜索相应的 eslint 扩展安装。

(2) 打开VS Code配置文件setting.json，在其中添加如下内容：

"editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
  },
复制代码

如此即可在编辑器保存文件时执行Eslint检测并修复。npm

3. 集成在 git 生命周期中

利用 Husky 集中在'pre-commit'生命周期，便可在每次提交前检查代码。json

-----正文完----- 相关文章推荐：bash

《前端团队开发思考》markdown

《Prettier配置指南》curl

《Stylelint配置指南》