【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:MyResearchvue-adminmy-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,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/vue3-essential",
        "plugin:@typescript-eslint/recommended"
    ],
    "overrides": [
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "vue",
        "@typescript-eslint"
    ],
    "rules": {
    }
}

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

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

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

"scripts": {
    "lint": "eslint src",
    "fix": "eslint src --fix"
}

三、配置 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.js 文件

module.exports = {
    // 一行的字符数，如果超过会进行换行，默认为80
    printWidth: 80,
    // 一个tab代表几个空格数，默认为80
    tabWidth: 2,
    // 是否使用tab进行缩进，默认为false，表示用空格进行缩减
    useTabs: false,
    // 字符串是否使用单引号，默认为false，使用双引号
    singleQuote: true,
    // 行位是否使用分号，默认为true
    semi: false,
    // 是否使用尾逗号，有三个可选值"<none|es5|all>"
    trailingComma: 'none',
    // 对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
    bracketSpacing: true
}

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

/dist/*
/html/*
.local
/node_modules/**

**/*.svg
**/*.sh

/public/*

四、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作为包管理器。