【Vue工程】002-配置 eslnt 与 prettier

【Vue工程】002-配置 eslnt 与 prettier

一、概述

1、ESLint 概述

ESLint 是一个静态代码分析工具,用于检查 JavaScript 代码的语法结构和查找程序错误。

它的主要特点是

1. 可扩展性好:ESLint 支持 JavaScript 和 JSX,可以通过插件扩展到额外的语法(如 Vue)。
2. 可配置性高:通过 .eslintrc 文件配置检查规则,可以灵活定制检查内容。
3. 基于 AST 检查:ESLint 不仅检查语法错误,还会基于 AST 检查潜在的问题,如未使用的变量。
4. 自动修复:ESLint 能自动修复一些问题,大大提高开发效率。
5. 丰富的规则:ESLint 内置了200+条规则,涵盖了编码风格、潜在问题等方方面面。

使用 ESLint 的主要步骤是

1. 安装:通过 npm 安装 ESLint 。

2. 配置:创建 .eslintrc.js 配置文件,启用想要的规则。

3. 检查:在命令行直接运行 ESLint,或在编辑器中集成 ESLint 。

4. 修复:ESLint 可以自动修复一些问题,运行 eslint --fix 修复代码。

5. 忽略文件:通过 .eslintignore 忽略不需要检查的文件。

2、prettier 概述

Prettier 是一个代码格式化工具,支持 JavaScript, TypeScript, CSS, HTML, JSON, GraphQL, Markdown 等各种语言。

使用 Prettier 的主要好处是

1. 统一团队的代码风格:Prettier 可以自动格式化代码,让所有人的代码都符合相同的风格规范。
2. 无需讨论代码风格:由工具自动格式化,不需要开发人员关注代码风格,只需关注逻辑即可。
3. 减少差异化审查:有统一的格式化标准之后,审查代码时可以更关注逻辑本身,减少因格式不同产生的差异化讨论。
4. 集成到编辑器和工程中:Prettier 可以直接集成到编辑器和构建工具中,保存代码时自动格式化,无需手动操作。
5. 支持多种语言:Prettier 支持主流的很多语言,帮助我们在不同语言项目中也可以保持一致的代码风格。

使用 Prettier 的主要步骤

1. 安装:使用 npm 或 yarn 安装 prettier 。
2. 配置:创建 .prettierrc 配置文件,配置规则。
3. 集成编辑器:在编辑器中集成 Prettier 插件,保存自动格式化。
4. 命令行/CI 使用:在命令行输入 prettier --write . 格式化当前目录所有代码。
5. 忽略文件:在 .prettierignore 中配置忽略的文件。

二、配置 eslint

1、安装 eslint

pnpm i -D eslint

2、生成配置文件

执行命令

如询问

# 生成配置文件:.eslintrc.js
npx eslint --init

选项参考

PS D:\MyResearch\vue-admin\my-vue-ts> npx eslint --init 
You can also run this command directly using 'npm init @eslint/config'.
√ How would you like to use ESLint? · problems    
√ 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
√ What format do you want your config file to be in? · JavaScript
The config that you've selected requires the following dependencies:

eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
√ Would you like to install them now? · No / Yes
√ Which package manager do you want to use? · pnpm

当前 package.json 文件

{
  "name": "my-vue-ts",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.47"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.59.2",
    "@typescript-eslint/parser": "^5.59.2",
    "@vitejs/plugin-vue": "^4.1.0",
    "eslint": "^8.39.0",
    "eslint-plugin-vue": "^9.11.0",
    "typescript": "^5.0.2",
    "vite": "^4.3.2",
    "vue-tsc": "^1.4.2"
  }
}

生成的 .eslintrc.cjs 文件

与文件 .eslintrc.js 无区别！

如果你的项目使用：

• ES6 的 import / export,推荐使用 .eslintrc.js
• Require() 函数加载,推荐使用 .eslintrc.cjs

module.exports = {
  "env": {
    "browser": true,
    "node": true,
    "es2021": true,
  },
  "extends": [
    "eslint:recommended",
    "plugin:vue/vue3-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
    "eslint-config-prettier",
  ],
  "overrides": [],
  "parser": "vue-eslint-parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "parser": "@typescript-eslint/parser",
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    },
  },
  "plugins": [
    "vue",
    "@typescript-eslint",
    "prettier",
  ],
  // 更多 rules ：https://eslint.org/docs/latest/rules/
  "rules": {
    // 禁用vue文件强制多个单词命名
    "vue/multi-word-component-names": "off",
    // 允许使用any
    "@typescript-eslint/no-explicit-any": ["off"],
    "@typescript-eslint/no-this-alias": [
      "error",
      {
        // this 可用的局部变量名称
        "allowedNames": ["that"]
      }
    ],
    // 允许使用@ts-ignore
    "@typescript-eslint/ban-ts-comment": "off",
    // 允许使用非空断言
    "@typescript-eslint/no-non-null-assertion": "off",
    "no-console": [
      // 提交时不允许有console.log
      "warn",
      {
        "allow": ["warn", "error"]
      }
    ],
    // 提交时不允许有debugger
    "no-debugger": "warn"
  }
}

3、在根目录新建 .eslintignore 文件

# 静态资源目录,无需lint
public
# 第三方依赖,无需lint
node_modules
# 构建输出目录,无需lint
dist

4、在 package.json 中添加运行脚本

"scripts": {
    "lint": "eslint src --fix --ext .ts,.tsx,.vue,.js,.jsx --max-warnings 0"
}

三、配置 prettier

1、安装 prettier

安装 prettier

pnpm install -D prettier eslint-config-prettier eslint-plugin-prettier

新增的开发依赖

devDependencies:
+ eslint-config-prettier 8.8.0
+ eslint-plugin-prettier 4.2.1
+ prettier 2.8.8

2、创建 .prettierrc.cjs 文件

module.exports = {
  // 一行的字符数，如果超过会进行换行，默认为80
  printWidth: 80,
  // 一个tab代表几个空格数，默认为80
  tabWidth: 2,
  // 是否使用tab进行缩进，默认为false，表示用空格进行缩减
  useTabs: false,
  // 字符串是否使用单引号，默认为false，使用双引号
  singleQuote: true,
  // 行位是否使用分号，默认为 true
  semi: true,
  // 是否使用尾逗号，有三个可选值""
  trailingComma: 'all',
  // 对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
  bracketSpacing: true,
  // 指定在格式化代码时要使用的行尾样式，默认为"lf"，可选值""
  /**
   * 不同操作系统上的行尾可能不同。例如，Windows 使用回车符后跟换行符 ("\r\n") 作为行尾，
   * 而基于 Unix 的系统如 macOS 和 Linux 只使用换行符 ("\n")。通过使用 "auto"，
   * Prettier 将自动检测输入文件中使用的行尾样式，并在输出中保留它。
   */
  endOfLine: "auto"
}

3、在根目录新建 .prettierignore 文件

# 静态资源目录,无需lint
public
# 第三方依赖,无需lint
node_modules
# 构建输出目录,无需lint
dist

四、npx eslint --init 选项详解

1、How would you like to use ESLint?

你想如何使用ESLint?

1. To check syntax only - 只检测语法；
2. To check syntax and find problems - 检测语法并找到问题（最推荐）；
3. To check syntax, find problems, and enforce code style - 检测语法,找到问题并强制执行代码风格（推荐）；

2、What type of modules does your project use?

你的项目使用什么类型的模块系统？

1. JavaScript modules (import/export) - 使用 ES6 中的导入导出模块（推荐）；

2. CommonJS (require/exports) - 使用 CommonJS 规范中的 require/exports 模块；

3. None of these - 不使用任何模块系统。

使用ES6模块系统

1. ES6 是 JavaScript 的最新标准,模块系统是其中重要的一部分,可以让我们以清晰的方式组织和重用代码。

2. 比 require/exports 更加现代和强大,静态化可以优化依赖解析,Tree Shaking 可以减少打包体积。

3. 现代框架(如Vue)和打包工具(如webpack)大都内置对 ES6 模块的支持,这样选项会更加顺手。

4. 未来的 JavaScript 会越来越支持 ES6 及以上新标准,选择 ES6 模块有助于项目更好地迈向未来。

3、Which framework does your project use?

你的项目使用哪个框架？

1. React - 使用React框架
2. Vue.js - 使用Vue框架
3. None of these - 不使用任何框架

4、Does your project use TypeScript?

你的项目使用 TypeScript 吗？

5、Where does your code run?

你的代码将在什么环境运行?

1. Browser - 浏览器环境；

2. Node - Node.js环境。

6、What format do you want your config file to be in?

你想要ESLint的配置文件采用什么格式？

1. JavaScript - 使用JavaScript编写配置文件（推荐）；
2. YAML - 使用YAML格式编写配置文件；
3. JSON - 使用JSON格式编写配置文件‘

7、Would you like to install them now?

The config that you’ve selected requires the following dependencies:

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

根据前面的选择,需要安装三个 ESLint 插件来支持 Vue 和 TypeScript 的检测！

8、Which package manager do you want to use?

1. npm - 使用npm作为包管理器；
2. yarn - 使用yarn作为包管理器；
3. pnpm - 使用pnpm作为包管理器。

五、eslint 最佳实践

@antfu/eslint-config 大佬方案！

参考：https://github.com/antfu/eslint-config

1、安装

pnpm add -D eslint @antfu/eslint-config

2、配置文件.eslintrc

{
  // 扩展"@antfu"配置，这是一个共享配置，可以根据需要进行定制化
  // https://github.com/antfu/eslint-config
  "extends": "@antfu",
  "rules": {
    // 禁用"eslint-comments/no-unlimited-disable"规则，此规则用于限制禁用某些ESLint规则的注释
    "eslint-comments/no-unlimited-disable": "off",
    // 强制使用大括号包围所有控制语句
    "curly": ["error", "all"],
    // Vue组件标签的顺序要求
    "vue/component-tags-order": ["error", {
      "order": ["route", "script", "template", "style"]
    }]
  }
}

3、忽略文件配置.eslintignore

dist
node_modules

4、VS Code 安装 eslint 插件

5、保存时自动格式化

项目的 .vscode 目录下setting.json 文件

{
  "prettier.enable": false,
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.organizeImports": false
  },

  // The following is optional.
  // It's better to put under project setting `.vscode/settings.json`
  // to avoid conflicts with working with different eslint configs
  // that does not support all formats.
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue",
    "html",
    "markdown",
    "json",
    "jsonc",
    "yaml"
  ]
}