eslint配置(个人学习)该项目使用的包管理器是pnpm，使用其他工具的朋友自己修改文中pnpm相关的安装命令，项目

方式一 (快速开始)

你可以使用以下命令安装和配置 ESLint :

sh复制代码pnpm create @eslint/config
# or
npm init @eslint/config

注意：运行以上命令是假设您已经有了一个package.json文件。如果没有，请确保事先运行pnpm init、npm init或yarn init。

按照提示步骤一步一步选择, 回车即可:

使用ESLint做什么? 我选择第三个, 检查语法, 发现问题, 强制代码风格

sh复制代码? 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

项目模块类型? 我的项目使用的 import/export 选择第一个

sh复制代码? What type of modules does your project use? …
❯ JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

项目用的啥框架? 我用Vue.js

sh复制代码? Which framework does your project use? …
  React
❯ Vue.js
  None of these

项目中使用 TypeScript? 是的选择 Yes，我不是 TypeScript 选择 No

sh
复制代码? Does your project use TypeScript? › No / Yes

代码运行环境? 我在项目中使用了 node 中的 process, 全选上

sh复制代码? Where does your code run? …  (Press <space> to select, <a> to toggle all, <i> to invert selection)
✔ Browser
✔ Node

选择代码风格? 我看了一下 popular style，里边没有 prettier ，想用 prettier 检查并格式化代码, 我建议使用回答问题来自定义代码风格

sh复制代码? How would you like to define a style for your project? …
  Use a popular style guide
❯ Answer questions about your style

ESLint 的配置文件格式? 我选择 JavaScript, 理由是可以在 js 文件中写条件判断语句来根据开发或生产环境开关 ESLint 规则

sh复制代码? What format do you want your config file to be in? …
❯ JavaScript
  YAML
  JSON

用啥缩进? 我选择Spaces , 默认它是4个空格，我们喜欢用2个空格, 后边生成的配置中我手动给改成2个空格

sh复制代码? What style of indentation do you use? …
  Tabs
❯ Spaces

字符串使用双引号还是单引号? 我们项目的小伙伴儿想用双引号, 选择Double

sh复制代码? What quotes do you use for strings? …
❯ Double
  Single

用哪种结束符? Windows是CRLF, Unix是LF, 我选Unix

sh复制代码? What line endings do you use? …
❯ Unix
  Windows

用分号吗? 我们习惯使用分号;，选择 Yes ，不喜欢写分号的朋友，请选择 No

sh
复制代码? Do you require semicolons? › No / Yes

检查到我没有安装ESLint, 是否马上安装? 安装 eslint 和 eslint-plugin-vue, 选择 Yes

sh复制代码Local ESLint installation not found.
The config that you've selected requires the following dependencies:

eslint-plugin-vue@latest eslint@latest
? Would you like to install them now? › No / Yes

选择您使用的包管理器? 我是 pnpm

sh复制代码? Which package manager do you want to use? …
  npm
  yarn
❯ pnpm

回车确认, 开始安装...

sh复制代码✔ 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? · prompt
✔ What format do you want your config file to be in? · JavaScript
✔ What style of indentation do you use? · 4
✔ What quotes do you use for strings? · double
✔ What line endings do you use? · unix
✔ Do you require semicolons? · No / Yes
Local ESLint installation not found.
The config that you've selected requires the following dependencies:

eslint-plugin-vue@latest eslint@latest
✔ Would you like to install them now? · No / Yes
✔ Which package manager do you want to use? · pnpm
Installing eslint-plugin-vue@latest, eslint@latest
...
...
Done in 27.9s
Successfully created .eslintrc.js file in /code/vite-vue3-project

在项目的 package.json 文件中查看 devDependencies增加了 eslint 和 eslint-plugin-vue 在项目根目录生成了.eslintrc.js 配置文件，打开文件找到 rules 把 indent 规则里边的 4 改成 2, 代码缩进就是 2 个空格了

在运行以上命令之后，您的目录中会有一个.eslintrc.{js，yml，json}文件。我选择使用的是JavaScript文件, 我的文件内容是这样的:

js复制代码module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: ["eslint:recommended", "plugin:vue/vue3-essential"],
  overrides: [],
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
  },
  plugins: ["vue"],
  rules: {
     indent: ['error', 2],
    quotes: ['error', 'single'],
    semi: ['error', 0],
    '@typescript-eslint/no-explicit-any': 'off',
    //未使用变量报错
    '@typescript-eslint/no-unused-vars': 'off',
  },
};

项目结构

public
src
index.html
.env
.gitignore
package.json
vite.config.js
uno.config.js
postcss.config.js

下面开始配置ESLint+Prettier来检查代码。

ESLint

`ESLint`入门

ESLint 是一个用于检测 ECMAScript/JavaScript 代码中的潜在问题和错误的工具，旨在使代码更一致并避免错误。它可以帮助开发者检测代码中的潜在问题，提高代码质量。

ESLint 是完全可插拔的。每一条规则都是一个插件，您可以在运行时添加更多。您还可以添加社区插件、配置和解析器来扩展 ESLint 的功能。

先决条件

要使用ESLint，必须安装Node.js（^12.22.0、^14.17.0 或>=16.0.0）并构建SSL支持。（如果您使用的是官方的Node.js发行版，则始终内置SSL。）

安装 ESLint

方式一 (快速开始)

你可以使用以下命令安装和配置 ESLint :

sh复制代码pnpm create @eslint/config
# or
npm init @eslint/config

注意：运行以上命令是假设您已经有了一个package.json文件。如果没有，请确保事先运行pnpm init、npm init或yarn init。

按照提示步骤一步一步选择, 回车即可:

使用ESLint做什么? 我选择第三个, 检查语法, 发现问题, 强制代码风格

sh复制代码? 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

项目模块类型? 我的项目使用的 import/export 选择第一个

sh复制代码? What type of modules does your project use? …
❯ JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

项目用的啥框架? 我用Vue.js

sh复制代码? Which framework does your project use? …
  React
❯ Vue.js
  None of these

项目中使用 TypeScript? 是的选择 Yes，我不是 TypeScript 选择 No

sh
复制代码? Does your project use TypeScript? › No / Yes

代码运行环境? 我在项目中使用了 node 中的 process, 全选上

sh复制代码? Where does your code run? …  (Press <space> to select, <a> to toggle all, <i> to invert selection)
✔ Browser
✔ Node

选择代码风格? 我看了一下 popular style，里边没有 prettier ，想用 prettier 检查并格式化代码, 我建议使用回答问题来自定义代码风格

sh复制代码? How would you like to define a style for your project? …
  Use a popular style guide
❯ Answer questions about your style

ESLint 的配置文件格式? 我选择 JavaScript, 理由是可以在 js 文件中写条件判断语句来根据开发或生产环境开关 ESLint 规则

sh复制代码? What format do you want your config file to be in? …
❯ JavaScript
  YAML
  JSON

用啥缩进? 我选择Spaces , 默认它是4个空格，我们喜欢用2个空格, 后边生成的配置中我手动给改成2个空格

sh复制代码? What style of indentation do you use? …
  Tabs
❯ Spaces

字符串使用双引号还是单引号? 我们项目的小伙伴儿想用双引号, 选择Double

sh复制代码? What quotes do you use for strings? …
❯ Double
  Single

用哪种结束符? Windows是CRLF, Unix是LF, 我选Unix

sh复制代码? What line endings do you use? …
❯ Unix
  Windows

用分号吗? 我们习惯使用分号;，选择 Yes ，不喜欢写分号的朋友，请选择 No

sh
复制代码? Do you require semicolons? › No / Yes

检查到我没有安装ESLint, 是否马上安装? 安装 eslint 和 eslint-plugin-vue, 选择 Yes

sh复制代码Local ESLint installation not found.
The config that you've selected requires the following dependencies:

eslint-plugin-vue@latest eslint@latest
? Would you like to install them now? › No / Yes

选择您使用的包管理器? 我是 pnpm

sh复制代码? Which package manager do you want to use? …
  npm
  yarn
❯ pnpm

回车确认, 开始安装...

sh复制代码✔ 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? · prompt
✔ What format do you want your config file to be in? · JavaScript
✔ What style of indentation do you use? · 4
✔ What quotes do you use for strings? · double
✔ What line endings do you use? · unix
✔ Do you require semicolons? · No / Yes
Local ESLint installation not found.
The config that you've selected requires the following dependencies:

eslint-plugin-vue@latest eslint@latest
✔ Would you like to install them now? · No / Yes
✔ Which package manager do you want to use? · pnpm
Installing eslint-plugin-vue@latest, eslint@latest
...
...
Done in 27.9s
Successfully created .eslintrc.js file in /code/vite-vue3-project

在运行以上命令之后，您的目录中会有一个.eslintrc.{js，yml，json}文件。我选择使用的是JavaScript文件, 我的文件内容是这样的:

module.exports = {
  env: {
    node: true,
    browser: true,
    es2021: true,
  },

  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:vue/vue3-essential',
  ],
  overrides: [
    {
      env: {
        node: true,
      },
      files: ['.eslintrc.{js,cjs}'],
      parserOptions: {
        sourceType: 'script',
      },
    },
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
  },
  plugins: ['@typescript-eslint', 'vue'],
  rules: {
    indent: ['error', 2],
    quotes: ['error', 'single'],
    semi: ['error', 0],
    '@typescript-eslint/no-explicit-any': 'off',
    //未使用变量报错
    '@typescript-eslint/no-unused-vars': 'off',
  },
}

Prettier

Prettier 入门

```
Prettier
```
是什么?
- 一个“有态度”的代码格式化工具
- 支持大量编程语言
- 已集成到大多数编辑器中
- 几乎不需要设置参数
为什么使用
```
Prettier
```
?
- 按保存键时，代码就被格式化了
- 代码评审时无须争论代码样式
- 节省时间和精力

安装 Prettier

首先,在本地安装Prettier

sh复制代码pnpm add prettier@latest -D
# or
npm install prettier@latest -D

然后，创建一个空的配置文件，让编辑器和其他工具知道您正在使用Prettier：

sh
复制代码echo {} > .prettierrc.json

在配置文件中增加如下内容:

json复制代码// .prettierrc.json 规则配置, 
// 后边将配置ESLint使用Prettier规则检查代码,以及怎么解决二者规则冲突的问题
{
  "useTabs": false,
  "tabWidth": 2,
  "jsxSingleQuote": false,
  "singleQuote": true,
  "endOfLine": "lf",
  "semi": false,
  "trailingComma": "es5"
}

配合`ESLint`使用, 解决二者规则冲突

安装eslint-plugin-prettier和eslint-config-prettier

sh
复制代码
pnpm add eslint-plugin-prettier@latest eslint-config-prettier@latest -D
# or
npm install eslint-plugin-prettier@latest eslint-config-prettier@latest -D

您需要在.eslintrc.js中添加plugin:prettier/recommended作为最后一个扩展：

js
复制代码
module.exports = {
  // 在 extends 尾部增加 plugin:prettier/recommended
  extends: [
    "eslint:recommended",
    "plugin:vue/vue3-essential",
    "plugin:prettier/recommended"
  ],
}

当 ESLint 的规则和 Prettier 的规则相冲突时，就会发现一个尴尬的问题，用Prettier来格式化代码，ESLint就会报错。

方法②：

与ESLint配合使用，请安装eslint-config-prettier，以使ESLint和Prettier彼此配合得很好。它关闭所有不必要的或可能与Prettier冲突的ESLint规则。具体步骤如下:

sh复制代码# Install eslint-config-prettier
pnpm add eslint-config-prettier@latest -D
# or
npm install eslint-config-prettier@latest -D

修改.eslintrc.js

js复制代码module.exports = {
  // 在 extends 尾部加入 prettier 即可
  "extends": [
    "eslint:recommended",
    "plugin:vue/vue3-essential",
    "prettier"
  ]
}

但是以上做法只是关闭了与Prettier相冲突的ESLint的规则, 而我们的目标是要让ESLint使用Prettier的规则去检查代码语法和风格等问题

安装eslint-plugin-prettier和eslint-config-prettier

sh
复制代码
pnpm add eslint-plugin-prettier@latest eslint-config-prettier@latest -D
# or
npm install eslint-plugin-prettier@latest eslint-config-prettier@latest -D

您需要在.eslintrc.js中添加plugin:prettier/recommended作为最后一个扩展：

js
复制代码
module.exports = {
  // 在 extends 尾部增加 plugin:prettier/recommended
  extends: [
    "eslint:recommended",
    "plugin:vue/vue3-essential",
    "plugin:prettier/recommended"
  ],
}

plugin:prettier/recommended做了什么？额，它相当于以下配置：

js
复制代码
module.exports = {
  extends: ["prettier"],
  plugins: ["prettier"],
  rules: {
    "prettier/prettier": "error",
    "arrow-body-style": "off",
    "prefer-arrow-callback": "off"
  }
}

解决eslint行尾序列终极方案

eslint配置(个人学习)