eslint 配置

原创已于 2023-01-14 12:26:38 修改 · 8.6k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vscode #javascript #vue #react

于 2022-05-13 00:11:29 首次发布

工程化专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了如何在Vue和React项目中配置ESLint和Prettier，包括安装、配置文件设定、与编辑器（VSCode）的集成以及解决两者冲突的方法，确保代码风格统一和规范。

Vue项目eslint配置

要求
ESLint v6.2.0 及以上
Node.js v12.22.x、v14.17.x、v16.x 及以上

在项目中安装 eslint eslint-plugin-vue

# npm 
npm install --save-dev eslint eslint-plugin-vue
# yarn
yarn add -D eslint eslint-plugin-vue

配置 .eslintrc.* 文件配置规则（以 .eslintrc.js 为例）

module.exports = {
  extends: [
  	/* vue 2 配置 */
    "plugin:vue/recommended",
	"plugin:vue/essential",
	"plugin:vue/strongly-recommended",
	/* vue 3 配置 */
	// "plugin:vue/vue3-recommended"
	// "plugin:vue/vue3-essential"
	// "plugin:vue/vue3-strongly-recommended"
  ],
  rules: {
    'vue/no-unused-vars': 'error'
  }
}

与编辑器集成（vs code）
- 安装 dbaeumer.vscode-eslint 微软官方提供的扩展。
- 在项目根目录创建 .vscode 文件夹，并添加 settings.json 文件如下图
- settings.json 文件添加如下配置
  代码如下：
```
{
	"editor.formatOnSave": true,
	"eslint.validate": [
		"javascript",
		"javascriptreact",
		"vue"
	],
	"vetur.validation.template": false
}
```
协调 Prettier 冲突
- 安装 eslint-config-prettier
```
# npm
npm install --save-dev eslint-config-prettier
# yarn
yarn add --dev eslint-config-prettier
```
- 在 .eslintrc.js 文件中添加如下图配置
  
  vue 项目eslint配置完成

react 项目配置eslint

初始化：npx create-react-app app-ts --template typescript

基础eslint配置

我们以使用cra初始化的项目为例（见下图）
在这里插入图片描述

执行如下命令行
npm install eslint --save-dev
然后再执行
npx eslint --init
会进入问答模式，下图选项仅供参考2. 你想如何使用 ESLint？To check syntax and find problems3. 您的项目使用什么类型的模块？JavaScript modules (import/export)
你的代码在哪里运行？ Browser
您希望您的配置文件采用什么格式？放在单独的 JavaScript 文件里
选择Yes

完成后会增加一个eslintrc.js文件

我们发现上图文件 eslintrc.js 文件中第一行有报错，我们在添加一个 .eslintignore 文件来修复这个问题，把.eslintrc.js 添加到忽略文件即可

这里需要注意⚠️ 不要把module.exports 改成 export default 会导致配置文件失效。。。

进阶eslint配置

打开vscode设置，按照下图选择
在这里插入图片描述
根目录下会增加一个.vscode 文件夹,作用是仅在当前项目下配置有效

在vscode 扩展里安装eslint 插件

使用默认设置就可以，关闭eslint格式化功能（默认是关闭的）

配置 prettier

项目安装 pretter
npm install --save-dev --save-exact prettier

创建 pretter 配置文件
echo {}> .prettierrc.json

{
	"useTabs": true,
	"arrowParens": "avoid",
	"printWidth": 120,
	"tabWidth": 2,
	"semi": true,
	"singleQuote": true,
	"bracketSpacing": true,
	"endOfLine": "auto",
	"trailingComma": "none"
}

vscode 安装 pretter (点击跳转)
pretter-vscode
安装 eslint-config-prettier 解决 pretter 与 eslint 冲突问题
npm install --save-dev eslint-config-prettier
5. 设置默认使用 prettier 格式化程序