关于eslint:Web项目如何配置Eslint

介绍

ESLint 是一个依据计划辨认并报告 ECMAScript/JavaScript 代码问题的工具，其目标是使代码格调更加统一并防止谬误。在很多中央它都与 JSLint 和 JSHint 相似，除了：

• ESLint 应用 Espree 对 JavaScript 进行解析。
• ESLint 在代码中应用 AST 评估计划。
• ESLint 齐全是插件式的，每个规定都是一个插件，你能够在运行时中增加更多插件。

装置

@REM npm 装置eslintnpm i -D eslint@REM yarn 装置eslintyarn  add -D eslint

配置

配置过程

npm init @eslint/configYou can also run this command directly using 'npm init @eslint/config'.Need to install the following packages:  @eslint/create-config@0.4.6Ok to proceed? (y) y@REM 您还能够应用“npm init @eslint/config”间接运行此命令。@REM 须要装置以下软件包：@REM  @eslint/create-config@0.4.6@REM 确定持续: 是How would you like to use ESLint? ...  To check syntax only  To check syntax and find problems> To check syntax, find problems, and enforce code style@REM 您想如何应用 ESLint？ ...@REM   仅查看语法@REM   查看语法并发现问题@REM > 查看语法、发现问题并强制执行代码格调What type of modules does your project use? ...> JavaScript modules (import/export)  CommonJS (require/exports)  None of these@REM 您的我的项目应用什么类型的模块？ ...@REM > JavaScript 模块（导入/导出）@REM   CommonJS（要求/导出）@REM   都不是Which framework does your project use? ...  React> Vue.js  None of these@REM 您的我的项目应用哪个框架？ ...@REM   React@REM > Vue.js@REM   都不是Does your project use TypeScript? » No / Yes@REM 您的我的项目应用 TypeScript 吗？ » 否/是Where does your code run? ...  (Press <space> to select, <a> to toggle all, <i> to invert selection)√ Browser√ Node你的代码在哪里运行？ ...（按 <space> 进行抉择，<a> 切换全副，<i> 反转抉择）√ 浏览器√ 节点How would you like to define a style for your project? ...> Use a popular style guide  Answer questions about your style@REM 您心愿如何为您的我的项目定义格调？ ...@REM > 应用风行的格调指南@REM   答复无关您格调的问题Which style guide do you want to follow? ...  Airbnb: https://github.com/airbnb/javascript> Standard: https://github.com/standard/standard  Google: https://github.com/google/eslint-config-google  XO: https://github.com/xojs/eslint-config-xo@REM 您想遵循哪种格调指南？ ...@REM   Airbnb: https://github.com/airbnb/javascript@REM > Standard: https://github.com/standard/standard@REM   Google: https://github.com/google/eslint-config-google@REM   XO: https://github.com/xojs/eslint-config-xoWhat format do you want your config file to be in? ...> JavaScript  YAML  JSON@REM 您心愿配置文件采纳什么格局？ ...@REM > JavaScript@REM   YAML@REM   JSON@REM 您抉择的配置须要以下依赖项：@REM eslint-plugin-vue@latest eslint-config-standard@latest eslint@^8.0.1 eslint-plugin-import@^2.25.2 eslint-plugin-n@^15.0.0 || ^16.0.0  eslint-plugin-promise@^6.0.0@REM ？您想当初装置它们吗？ » 否/是The config that you've selected requires the following dependencies:eslint-plugin-vue@latest eslint-config-standard@latest eslint@^8.0.1 eslint-plugin-import@^2.25.2 eslint-plugin-n@^15.0.0 || ^16.0.0  eslint-plugin-promise@^6.0.0? Would you like to install them now? » No / YesWhich package manager do you want to use? ...> npm  yarn  pnpm@REM 您想应用哪个包管理器？ ...@REM > npm@REM   yarn@REM   pnpm

配置后果

√ How would you like to use ESLint? · style√ What type of modules does your project use? · esm√ Which framework does your project use? · vue√ Does your project use TypeScript? · No / Yes√ Where does your code run? · browser, node√ How would you like to define a style for your project? · guide√ Which style guide do you want to follow? · standard√ What format do you want your config file to be in? · JavaScriptChecking peerDependencies of eslint-config-standard@latestThe config that you've selected requires the following dependencies:eslint-plugin-vue@latest eslint-config-standard@latest eslint@^8.0.1 eslint-plugin-import@^2.25.2 eslint-plugin-n@^15.0.0 || ^16.0.0  eslint-plugin-promise@^6.0.0√ Would you like to install them now? · No / Yes√ Which package manager do you want to use? · npmInstalling eslint-plugin-vue@latest, eslint-config-standard@latest, eslint@^8.0.1, eslint-plugin-import@^2.25.2, eslint-plugin-n@^15.0.0 || ^16.0.0 , eslint-plugin-promise@^6.0.0

装置我的项目 Eslint 反对

Webpack 形式

装置 eslint-webpack-plugin

@REM npmnpm install eslint-webpack-plugin -D@REM yarnyarn add eslint-webpack-plugin --save-dev

在 Webpack.config.js 中应用

具体配置可查看官网：eslint-webpack-plugin

plugins: [  new ESLintWebpackPlugin({    // 指定查看文件的根目录    context: path.resolve(__dirname, "src")  })],

Vite 形式

其实， Viite 创立的我的项目原本是不须要另外配置 Eslint 依据 Vite 官网文档，个别在应用 Vite 的命令创立 Web 我的项目时应用自定义创立应用不应用默认模版时会询问是否须要配置 Eslint，然而在应用脚本创立 uniapp 我的项目时须要另外装置

应用 Vite 建设我的项目例子

npm create vite@latest my-vue-app --template vue√ Select a framework: » Vue√ Select a variant: » Customize with create-vue ↗Need to install the following packages:  create-vue@3.7.3Ok to proceed? (y) yVue.js - The Progressive JavaScript Framework√ Add TypeScript? ... No / Yes√ Add JSX Support? ... No / Yes√ Add Vue Router for Single Page Application development? ... No / Yes√ Add Pinia for state management? ... No / Yes√ Add Vitest for Unit Testing? ... No / Yes√ Add an End-to-End Testing Solution? » No√ Add ESLint for code quality? ... No / Yes√ Add Prettier for code formatting? ... No / Yes

装置 vite-plugin-eslint

阐明: 该包是用于配置 vite 运行的时候自动检测 eslint 标准 不合乎页面会报错

@REM npm 装置npm i -D vite-plugin-eslint@REM yarn 装置yarn add -D vite-plugin-eslint --save-dev

装置 eslint-parser

@REM npm 装置npm i -D @babel/core @babel/eslint-parser@REM yarn 装置yarn add @babel/core @babel/eslint-parser --save-dev

拓展（装置 prettier）

失常来说装置到上一步曾经是实现了 Eslint 配置，此时应用的是 Eslint 风行格调中的 Standard 格调，因为该规定比拟严格，应用起来可能有点麻烦，有些开发者就喜爱应用 prettier 的绝对比拟宽松的规定，以下就是该规定的配置形式

装置依赖

@REM npm 装置npm i -D prettier eslint-config-prettier eslint-plugin-prettier@REM yarn 装置yarn add prettier eslint-config-prettier eslint-plugin-prettier --save-dev

配置.prettierrc.js

在根目录上面增加.prettierrc.js 文件，而后将上面的配置增加到其中：

//这些配置随我的项目标准而定，并非须要module.exports = {  // 一行最多多少个字符  printWidth: 150,  // 指定每个缩进级别的空格数  tabWidth: 2,  // 应用制表符而不是空格缩进行  useTabs: true,  // 在语句开端是否须要分号  semi: true,  // 是否应用单引号  singleQuote: true,  // 更改援用对象属性的工夫 可选值"<as-needed|consistent|preserve>"  quoteProps: "as-needed",  // 在JSX中应用单引号而不是双引号  jsxSingleQuote: false,  // 多行时尽可能打印尾随逗号。（例如，单行数组永远不会呈现逗号结尾。） 可选值"<none|es5|all>"，默认none  trailingComma: "es5",  // 在对象文字中的括号之间打印空格  bracketSpacing: true,  // jsx 标签的反尖括号须要换行  jsxBracketSameLine: false,  // 在独自的箭头函数参数四周包含括号 always：(x) => x \ avoid：x => x  arrowParens: "always",  // 这两个选项可用于格式化以给定字符偏移量（别离包含和不包含）开始和完结的代码  rangeStart: 0,  rangeEnd: Infinity,  // 指定要应用的解析器，不须要写文件结尾的 @prettier  requirePragma: false,  // 不须要主动在文件结尾插入 @prettier  insertPragma: false,  // 应用默认的折行规范 always\never\preserve  proseWrap: "preserve",  // 指定HTML文件的全局空格敏感度 css\strict\ignore  htmlWhitespaceSensitivity: "css",  // Vue文件脚本和款式标签缩进  vueIndentScriptAndStyle: false,  endOfLine: "auto",};

留神：配置文件批改如果是 eslint 能立即反馈并且提醒，然而 prettier 批改后，因为联合了 eslint 插件，可能会导致不同步，须要重启 VsCode 能力统一，比方把单引号批改为双引号，prettier 能立马格式化代码应用双引号，然而 eslint 查看会报错，所以批改实现 prettier 配置文件倡议重启一下 VsCode，保障 eslint 查看同步更新。

配置.prettierignore

如果不想格式化某些文件能够再增加一个的文件，用法和.gitignore 文件差不多，将不须要格式化的文件夹或文件通过正则匹配或者具名的形式增加进去，这样就不会格式化对应的文件了。

Prettier 联合 ESLint

在 package.json 的 scripts 节点中增加如下节点

"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"

在.eslintrc.js 在增加如下选项，而后运行 npm run lint 命令即可失效

"plugin:prettier/recommended", "prettier";