eslint

今天的木鱼
49 阅读5分钟

1、eslint：主要进行代码语法检测和少部分的代码格式管理

**主要作用：**使用espree将javaScript代码解析成抽象语法树（AST）， 然后通过AST分析代码，给予下面两种提示

  1. 代码质量问题：使用方式有可能有问题(problematic patterns)
相关配置举例： 
no-unused-vars
no-extra-bind
no-implicit-globals
prefer-promise-reject-errors

2. 代码风格问题：风格不符合一定规则 (doesn’t adhere to certain style guidelines)

相关配置举例： 
max-len
no-mixed-spaces-and-tabs
keyword-spacing
comma-style

2、prettier：代码格式化

主要作用:Prettier 是一款代码格式化工具，它可以自动格式化代码，使代码风格保持一致

规则文档： prettier.io/docs/en/opt…

规则详情：

　// prettier.config.js or .prettierrc.js
　　module.exports = {
　　    // 一行最多 100 字符
　　    printWidth: 100,
　　    // 使用 4 个空格缩进
　　    tabWidth: 4,
　　    // 不使用缩进符，而使用空格
　　    useTabs: false,
　　    // 行尾需要有分号
　　    semi: true,
　　    // 使用单引号
　　    singleQuote: true,
　　    // jsx 不使用单引号，而使用双引号
　　    jsxSingleQuote: false,
　　    // 末尾不需要逗号
　　    trailingComma: 'none',
　　    // 大括号内的首尾需要空格
　　    bracketSpacing: true,
　　    // jsx 标签的反尖括号需要换行
　　    jsxBracketSameLine: false,
　　    // 箭头函数，只有一个参数的时候，也需要括号
　　    arrowParens: 'always',
　　    // 每个文件格式化的范围是文件的全部内容
　　    rangeStart: 0,
　　    rangeEnd: Infinity,
　　    // 不需要写文件开头的 @prettier
　　    requirePragma: false,
　　    // 不需要自动在文件开头插入 @prettier
　　    insertPragma: false,
　　    // 使用默认的折行标准
　　    proseWrap: 'preserve',
　　    // 根据显示样式决定 html 要不要折行
　　    htmlWhitespaceSensitivity: 'css',
　　    // 换行符使用 lf
　　    endOfLine: 'lf'
　　};

3、解决eslint和prettier的冲突

3.1冲突原因：

eslint除了语法检测配置， 还有部分代码格式相关的配置

3.2期望结果

由eslint来进行语法检测、由prettier来进行代码格式管理

3.3解决方案

  • eslint-config-prettier: 因为ESLint和prettier在格式化方面存在冲突， 通过这个config可以关闭eslint所有与prettier冲突的格式化配置。需要配合下面设置才能生效

    // .eslintrc    
{      
    "extends": ["prettier"] // prettier 一定要是最后一个，才能确保覆盖    
}

  • eslint-plugin-prettier（推荐， 可选）， 将prettier的rules以插件模式加入eslint里面。为什么"可选" ？当使用eslint-config-prettier之后，格式已全部由prettier接管。那我们为什么还要这个 plugin？其实是因为我们期望报错的来源依旧是 ESLint，使用这个，相当于把 Prettier 推荐的格式问题的配置以 ESLint rules 的方式写入，这样相当于可以统一代码问题的来源。需要配合下面配置才能生效

    // .eslintrc    
{      
    "plugins": ["prettier"],      
    "rules": {        
        "prettier/prettier": "error"      
    }    
}

  • plugin:prettier/recommended上面两种配置的集成方案， 用于将prettier的规则集成到ESLint中。同时可以避免在prettier和ESLint之间出现的冲突。但是还是需要下载eslint-config-prettier和eslint-plugin-prettier, 只是配置写法可以省略，具体配置如下

    // .eslintrc
以下配置都需要安装prettier， eslint-plugin-prettier， eslint-config-prettier， 
{
  "extends": ["plugin:prettier/recommended"]
}

等同于

{
  "extends": ["prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error",
    "arrow-body-style": "off",
    "prefer-arrow-callback": "off"
  }
}

4、eslint-plugin-vue

4.1预设

  • "plugin:vue/essential"是最基本的配置
  • "plugin:vue/recommended"是一个基本的配置，包含了一些Vue.js项目中常见的最佳实践，但是并不强制要求遵循所有的规则。这个配置适用于大多数Vue.js项目，它会检查一些常见的问题和代码风格，但不会过于严格。
  • "plugin:vue/strongly-recommended"是一个更严格的配置，包含了更多的规则，强制要求遵循更多的最佳实践。这个配置适用于需要更高代码质量的项目，它会检查更多的代码风格和潜在的问题。

4.2 问题

1、在vsCode存在着提示信息无法被关闭的情况， 需要配置.vscode/setting

 vetur.validation.template: false

2、会与volar产生冲突， 具体可以参考www.ztsky.cn/5872.html、

5、在项目中使用：

5.1 安装npm包（视频云基线只需要添加prettier）

eslint v7.24.0   // eslint v8后面才开始支持顶级await的更新， 考虑到版本大改，暂不考虑版本8
eslint-config-prettier v8.2.0
eslint-plugin-prettier v3.4.0
eslint-plugin-vue v7.9.0
prettier v2.8.8
eslint-loader v4.0.2 // 需要编译的输出错误可以下载并且在config文件添加上配置

5.2 增加配置文件

  • .eslintrc.js

  • eslintRules.js

  • .prettierrc

  • .vscode/setting.json

5.3 package.json(视频云基线已有lint配置)

添加项目一键化格式

 "lint-fix": "eslint --fix --ext .js --ext .vue src"

5.4更改webpack配置（视频云基线不用更改）

如果想要编译时输入eslint报错， 配置中添加

 module: {
    rules: [
      {
        test: /\.vue$/,
        loader: "vue-loader!eslint-loader"
      },
      {
        test: /\.js$/,
        loader: "babel-loader!eslint-loader",
      }
  }

6、安装插件

6.1 vsCode

  • eslint
  • prettier
  • vuter

6.2 webstorm

  • 查看eslint报错（针对webstorm 2020.1.1）
  1. 打开WebStorm，并确保您已经打开了您的项目。
  2. 在菜单栏中，选择"Code"选项。
  3. 在下拉菜单中，选择"Inspect Code"选项。
  4. 这将打开"Code Inspection"对话框，其中列出了代码中的问题和错误。
  5. 在"Code Inspection"对话框中，您可以看到列出的问题和错误。这些问题可能包括语法错误、命名错误、未使用的变量等等。
  6. 您可以单击每个问题，以查看详细信息。在详细信息中，您可以看到问题所在的文件、行号以及问题的描述。
  7. 如果您想在代码编辑器中定位到问题所在的位置，可以双击问题或右键单击问题并选择"Go to Source"。
  • 进行配置

image-20230628165909564.png

7、禁用eslint

7.1、注释忽略（可忽略代码或者文件）

1.整个文件忽略

// 在文件顶部设置
/* eslint-disable */

2.某一区块忽略

/* eslint-disable */
console.log('这里的代码不会被eslint规则校验');
/* eslint-enable */

3.某一区块的部分规则忽略

/* eslint-disable no-alert, no-console */
alert('忽略alert');
console.log('忽略console');
/* eslint-enable no-alert, no-console */

4.某行忽略

alert('忽略行'); // eslint-disable-line
or
// eslint-disable-next-line
alert('忽略行');

5.某行部分规则忽略

alert('忽略规则'); // eslint-disable-line no-alert, quotes, semi
or
// eslint-disable-next-line no-alert, quotes, semi
alert('忽略规则');

7.2、eslintignore(可忽略文件)

新建 .eslintignore添加进项目

7.3、在.eslintrc.js中配置

// .eslintrc.js
{
  "ignorePatterns": [
    "node_modules/**/*.js",
    "src/config.js"
  ],
  "rules": {
    // 其他规则配置
  }
}
avatar
文章
阅读
粉丝