Vue3项目添加|Vue3项目添加 ESLint 和 Prettier Vue3项目添加ESLint和Prettier

Vue3 + TS 项目中增加 ESLint 和 Prettier 背景
eslint 用于校验代码语法规范，保证项目质量；
prettier 用于保证项目代码的格式与风格；
Vue3 项目初始化参考搭建 Vite 项目

# npm 6.x npm init vite@latest my-vue-app --template vue# npm 7+, 需要额外的双横线： npm init vite@latest my-vue-app -- --template vue# yarn yarn create vite my-vue-app --template vue# pnpm pnpm create vite my-vue-app -- --template vue

ESLint
安装

npm add eslint -D

初始化

npx eslint --init

初始化过程中的交互选项：

(1) How would you like to use ESLint? 选择：To check syntax and find problems(2) What type of modules does your project use? 选择：JavaScript modules (import/export)(3) Which framework does your project use? 选择：Vue.js(4) Does your project use TypeScript? 选择：Yes(5) Where does your code run? 选择：Browser(6) What format do you want your config file to be in? 选择：JavaScript(7) Would you like to install them now? 选择：Yes(8) Which package manager do you want to use? 选择：pnpm / npm / yarn

按照这样选择会自动安装识别 vue 和 ts 文件所需的插件
初始化完成后会在项目根目录生成配置文件 .eslintrc.js
.eslintrc.js 配置改写配置如下

module.exports = { env: { browser: true, es2021: true, node: true, }, extends: [ "eslint:recommended", "plugin:vue/vue3-essential", "plugin:@typescript-eslint/recommended", "prettier", ], parser: "vue-eslint-parser", parserOptions: { ecmaVersion: "latest", parser: "@typescript-eslint/parser", sourceType: "module", }, plugins: ["vue", "@typescript-eslint", "prettier"], rules: { "no-console": process.env.NODE_ENV === "production" ? "warn" : "off", "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off", "@typescript-eslint/ban-types": "warn", "@typescript-eslint/no-explicit-any": "off", "vue/no-unused-vars": "warn", "vue/multi-word-component-names": "warn", }, };

script 配置 pakcage.json 中新增 script 如下

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

eslint . 为指定lint当前项目中的文件
--ext 为指定lint哪些后缀的文件
--fix 开启自动修复

执行脚本即可使用 eslint 进行全局检查和修复

npm run lint

安装 VSCode 插件 ESLint 实现每次保存代码时，自动执行lint命令来修复代码的错误。
在项目中新建.vscode/settings.json文件，然后在其中加入以下配置。

{ // 开启自动修复 "editor.codeActionsOnSave": { "source.fixAll": false, "source.fixAll.eslint": true } }

Prettier
安装

npm install prettier -D

配置在根目录下新建.prettierrc.js

module.exports = { // 一行的字符数，如果超过会进行换行，默认为 80 printWidth: 100, // 一个缩进使用几个空格数 tabWidth: 2, // 是否使用 tab 进行缩进，默认为 false，表示用空格进行缩减 useTabs: false, // 是否在句尾使用分号 semi: true, // 字符串是否强制使用单引号，默认为 false，使用双引号 singleQuote: false, // 是否使用尾逗号，有三个可选值"" trailingComma: "es5", // 对象大括号直接是否有空格，默认为 true，效果：{ foo: bar } bracketSpacing: true, // 处理换行符 lf,crlf,cr,auto endOfLine: "auto", // Object 对象中的引号处理方式 quoteProps: "consistent", };

详细配置见官方文档
script 配置 【Vue3项目添加|Vue3项目添加 ESLint 和 Prettier】pakcage.json 中新增 script 如下