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

我就是我 2023-09-27 18:12 87阅读 0赞

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

#### 文章目录 ####

*  【Vue工程】002-配置 eslnt 与 prettier
 *  一、概述
 *   *  1、ESLint 概述
     *   *  它的主要特点是
         *  使用 ESLint 的主要步骤是
     *  2、prettier 概述
     *   *  使用 Prettier 的主要好处是
         *  使用 Prettier 的主要步骤
 *  二、配置 eslint
 *   *  1、安装 eslint
     *  2、生成配置文件
     *   *  执行命令
         *  选项参考
         *  当前 \`package.json\` 文件
         *  生成的 \`.eslintrc.cjs\` 文件
     *  3、在根目录新建 \`.eslintignore\` 文件
     *  4、在 \`package.json\` 中添加运行脚本
 *  三、配置 prettier
 *   *  1、安装 prettier
     *   *  安装 prettier
         *  新增的开发依赖
     *  2、创建 \`.prettierrc.cjs\` 文件
     *  3、在根目录新建 \`.prettierignore\` 文件
 *  四、\`npx eslint --init\` 选项详解
 *   *  1、How would you like to use ESLint?
     *  2、What type of modules does your project use?
     *   *  使用ES6模块系统
     *  3、Which framework does your project use?
     *  4、Does your project use TypeScript?
     *  5、Where does your code run?
     *  6、What format do you want your config file to be in?
     *  7、Would you like to install them now?
     *  8、Which package manager do you want to use?
 *  五、eslint 最佳实践
 *   *  1、安装
     *  2、配置文件\`.eslintrc\`
     *  3、忽略文件配置\`.eslintignore\`
     *  4、VS Code 安装 eslint 插件
     *  5、保存时自动格式化

## 一、概述 ##

### 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,
      // 是否使用尾逗号，有三个可选值"<none|es5|all>"
      trailingComma: 'all',
      // 对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
      bracketSpacing: true,
      // 指定在格式化代码时要使用的行尾样式，默认为"lf"，可选值"<lf|crlf|cr|auto>"
      /**
       * 不同操作系统上的行尾可能不同。例如，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"
      ]
    }