Web项目如何配置Eslint

介绍

ESLint 是一个根据方案识别并报告 ECMAScript/JavaScript 代码问题的工具，其目的是使代码风格更加一致并避免错误。在很多地方它都与 JSLint 和 JSHint 类似，除了：

ESLint 使用 Espree 对 JavaScript 进行解析。
ESLint 在代码中使用 AST 评估方案。
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  to select,  to toggle all,  to invert selection)
√ Browser
√ Node
你的代码在哪里运行？ ...（按  进行选择， 切换全部， 反转选择）
√ 浏览器
√ 节点
 
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

配置结果

 √ 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? · JavaScript
Checking peerDependencies of eslint-config-standard@latest
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
Installing 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 npm
npm install eslint-webpack-plugin -D
@REM yarn
yarn 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.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

安装 vite-plugin-eslint

说明: 该包是用于配置 vite 运行的时候自动检测 eslint 规范不符合页面会报错

 @REG npm 安装
npm i -D vite-plugin-eslint
@REG 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,
  // 更改引用对象属性的时间 可选值""
  quoteProps: "as-needed",
  // 在JSX中使用单引号而不是双引号
  jsxSingleQuote: false,
  // 多行时尽可能打印尾随逗号。（例如，单行数组永远不会出现逗号结尾。） 可选值""，默认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";

相关阅读:
最新版一媒体7.3、星媒体、皮皮剪辑，视频MD ，安卓手机剪辑去重神器+搬运脚本+去视频重软件工具
 Spring MVC拦截器
 C++ 命名空间-----namespace（超详细解析，小白必看系列）
仿游戏热血江湖游戏类31
手把手教你实现buffer(一) —— C++中buffer的概念及需求
 Vim功能大纲
 一文带你看透手机号码归属地
 连续仨月霸占牛客榜首，京东 T8 呕心沥血神作：700 页 JVM 虚拟机实战手册
 FITC-PSA豌豆凝集素，PSA-FITC，豌豆凝集素修饰绿色荧光素
 项目管理（如何进行项目质量管理）
原文地址：https://www.cnblogs.com/observer-csh/p/17694717.html

	@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 to select, to toggle all, to invert selection)
	√ Browser
	√ Node
	你的代码在哪里运行？ ...（按进行选择，切换全部，反转选择）
	√ 浏览器
	√ 节点

	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

	√ 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? · JavaScript
	Checking peerDependencies of eslint-config-standard@latest
	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
	Installing 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 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

	@REG npm 安装
	npm i -D vite-plugin-eslint
	@REG 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,
	// 更改引用对象属性的时间可选值""
	quoteProps: "as-needed",
	// 在JSX中使用单引号而不是双引号
	jsxSingleQuote: false,
	// 多行时尽可能打印尾随逗号。（例如，单行数组永远不会出现逗号结尾。）可选值""，默认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",
	};