Vue3 project adds ESLint and Prettier

Add ESLint and Prettier to Vue3 + TS project

background

eslint is used to verify code syntax specifications to ensure project quality;
prettier is used to ensure the format and style of the project code;

Vue3 project initialization

Refer to Building a Vite Project

 # 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

Install

 npm add eslint -D

initialization

 npx eslint --init

Interactive options during initialization:

 (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

Selecting this way will automatically install the plugins needed to identify vue and ts files

After initialization, a configuration file will be generated in the project root directory .eslintrc.js

.eslintrc.js configuration

Rewrite the configuration as follows

 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 configuration

Added in pakcage.json script as follows

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

eslint . For the specified lint files in the current project
--ext is the file that specifies which suffixes of lint
--fix enable automatic repair

Execute scripts to globally check and fix with eslint

 npm run lint

Install the VSCode plugin ESLint

Implement the automatic execution of the lint command to fix errors in the code each time the code is saved.

Create a new .vscode/settings.json file in the project and add the following configuration to it.

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

Prettier

Install

 npm install prettier -D

configure

Create a new one in the root directory .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",
};

For detailed configuration, see the official documentation

script configuration

pakcage.json in script as follows

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

Install the VSCode plugin Prettier - Code formatter

Install this plugin to automatically complete formatting when saving

Add a rule to .vscode/settings.json

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

TODO:

Conflict between ESLint and Prettier

refer to

• Prettier configuration
• ESLint configuration
• Typescript ESLint configuration
• eslint-plugin-vue configuration
• Guide to using ESLint+prettier+stylelint+husky in vue3+ts+vite project