vite + vue3 + ts + esLint + prettier 配置

1.使用pnpm创建一个新的Vue 3 + TypeScript项目

pnpm create vite my-project --template vue-ts

cd my-project

pnpm install
pnpm run dev

2.安装EsLint

pnpm install -D eslint

3.初始化配置EsLint

npx eslint --init

3.1 选择模式： (To check syntax and find problems)

You can also run this command directly using 'npm init @eslint/config'.
? How would you like to use ESLint? ...
  To check syntax only
> To check syntax and find problems
  To check syntax, find problems, and enforce code style

3.2 选择语言模块： (选JavaScript modules)

? What type of modules does your project use? ...
> JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

3.3 选择语言框架 (选Vue.js)

? Which framework does your project use? ...
  React
> Vue.js
  None of these

3.4 是否使用ts (选TypeScript)

? Does your project use TypeScript? » No / Yes

3.5 代码在哪里运行 (用空格选中 Browser+Node)

? Where does your code run? ...  (Press <space> to select, <a> to toggle all, <i> to invert selection)
√ Browser
√ Node

3.6 您希望您的配置文件是什么格式? (选JavaScript)

? What format do you want your config file to be in? ...
> JavaScript
  YAML
  JSON

3.7 您想现在安装它们吗? (选择Yes)

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

3.8、您要使用哪个软件包管理器？ (选择pnpm)

? Which package manager do you want to use? ...
  npm
  yarn
> pnpm

4.安装 vite-plugin-eslint(用于配置vite运行的时候自动检测eslint规范)

pnpm install -D vite-plugin-eslint

配置 vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import eslintPlugin from 'vite-plugin-eslint'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), eslintPlugin()],
})

5.安装eslint-parser

pnpm install -D @babel/core             
pnpm install -D @babel/eslint-parser

6.安装prettier

pnpm install -D prettier
pnpm install -D eslint-config-prettier // eslint兼容的插件
pnpm install -D eslint-plugin-prettier // eslint的prettier

7.创建.prettierrc.js文件，并添加以下内容

module.exports = {
  printWidth: 120, // 每行代码长度（默认80）
  tabWidth: 2, // 每个tab相当于多少个空格（默认2）
  useTabs: false, // 是否使用tab进行缩进（默认false）
  singleQuote: true, // 使用单引号（默认false）
  semi: false, // 声明结尾使用分号(默认true)
  trailingComma: "es5", // 多行使用拖尾逗号（默认none）
  bracketSpacing: true, // 对象字面量的大括号间使用空格（默认true）
  arrowParens: "avoid", // 只有一个参数的箭头函数的参数是否带圆括号（默认avoid）
  endOfLine: "auto", // 文件换行格式 LF/CRLF
};

8.配置 .eslintrc.cjs文件

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    'eslint:recommended', // 使用推荐的eslint
    'plugin:vue/vue3-recommended', // 使用插件支持vue3
    'plugin:prettier/recommended',
    'eslint-config-prettier',
  ],
  parser: 'vue-eslint-parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    parser: '@typescript-eslint/parser',
    ecmaFeatures: {
      modules: true,
      jsx: true,
    },
  },
  plugins: [
    'vue', // 引入vue的插件 eslint-plugin-vue
    'prettier', // 引入规范插件 eslint-plugin-prettier
    '@typescript-eslint',
  ],
  globals: {},
  // 这里时配置规则的,自己看情况配置
  rules: {},
}

9.配置VScode，支持保存自动格式化

// 根目录下新建.vscode/settings.json文件
// settings.json
{
    "editor.formatOnType": true,
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}

10.修改package.json文件，添加以下scripts

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

11.运行以下命令来检查代码并自动修复

pnpm run lint:fix

12.其他

开发工具：

vscode

安装插件：

ESLint
Prettier

版本依赖：

{
  ...
  "devDependencies": {
    "@babel/core": "^7.21.3",
    "@babel/eslint-parser": "^7.21.3",
    "@typescript-eslint/eslint-plugin": "^5.57.0",
    "@typescript-eslint/parser": "^5.57.0",
    "eslint": "^8.37.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-vue": "^9.10.0",
    "prettier": "^2.8.7",
    "vite-plugin-eslint": "^1.8.1"
  }
}

demo地址