Web项目如何配置Eslint过程详解

@REM npm 安装eslint
npm i -D eslint
@REM yarn 安装eslint
yarn  add -D eslint

npm init @eslint/config
You can also run this command directly using 'npm init @eslint/config'.
Need to install the following packages:
  @eslint/create-config@0.4.6
Ok 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-xo
What 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 / Yes
Which package manager do you want to use? ...
> npm
  yarn
  pnpm
@REM 您想使用哪个包管理器？ ...
@REM > npm
@REM   yarn
@REM   pnpm

@REM npm
npm install eslint-webpack-plugin -D
@REM yarn
yarn add eslint-webpack-plugin --save-dev

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

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.3
Ok to proceed? (y) y

Vue.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

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

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

@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

//这些配置随项目规范而定，并非需要
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",
};

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

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