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,
  // 是否使用尾逗号，有三个可选值"<none|es5|all>"
  trailingComma: "es5",
  // 对象大括号直接是否有空格，默认为 true，效果：{ foo: bar }
  bracketSpacing: true,
  // 处理换行符 lf,crlf,cr,auto
  endOfLine: "auto",
  // Object 对象中的引号处理方式
  quoteProps: "consistent",
};

详细配置见 官方文档

script 配置

pakcage.json 中新增 script 如下

  "scripts": {
    "format": "prettier --write \"./**/*.{html,vue,ts,js,json,md}\"",
  }

安装 VSCode 插件 Prettier - Code formatter

安装该插件以实现在保存的时候自动完成格式化

在 .vscode/settings.json 中添加一下规则

{
    // 保存的时候自动格式化
    "editor.formatOnSave": true,
    // 默认格式化工具选择prettier
    "editor.defaultFormatter": "esbenp.prettier-vscode"
}

TODO:

ESLint 和 Prettier 的冲突问题

参考

• Prettier 配置
• ESLint 配置
• Typescript ESLint 配置
• eslint-plugin-vue 配置
• vue3+ts+vite项目中使用ESLint+prettier+stylelint+husky指南