关于前端: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 指南