vue3+ts+vite搭建脚手架（二）配置eslint&prettier

我们用vite创建好的脚手架是十分纯净的，我们可以自由配置一些自己想要的东西

1.安装 eslint 依赖

javascript 复制代码

npm i eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin @vue/eslint-config-typescript -D

eslint：ESLint 的核心包。
eslint-plugin-vue：用于 Vue 文件的 ESLint 插件。
@typescript-eslint/parser：解析 TypeScript 文件。
@typescript-eslint/eslint-plugin：为 TypeScript 提供 ESLint 插件。
@vue/eslint-config-typescript

2.安装 prettier 依赖

javascript 复制代码

npm i prettier @vue/eslint-config-prettier eslint-plugin-prettier -D

prettier：代码格式化工具。
eslint-config-prettier：禁用所有与 Prettier 格式化规则相冲突的 ESLint 规则。
eslint-plugin-prettier：将 prettier 作为 ESLint 规范来使用。

3.配置eslint、prettier相关文件

.eslintrc.js

javascript 复制代码

module.exports = {
  root: true,
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
    sourceType: 'module'
  },
  extends: [
    'plugin:vue/vue3-recommended',
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier',
    'plugin:prettier/recommended'
  ],
  rules: {
    'no-var': 'error',
    semi: 'off',
    '@typescript-eslint/consistent-type-definitions': ['error', 'interface'],
    '@typescript-eslint/no-explicit-any': 'off',
    '@typescript-eslint/no-var-requires': 0,
    '@typescript-eslint/no-require-imports': 'off',
    'vue/multi-word-component-names': 'off',
    'no-async-promise-executor': 'off',
    '@typescript-eslint/no-empty-object-type': 'off',
    'no-undef': 'off',
    '@typescript-eslint/no-unused-vars': [
      'error',
      {
        vars: 'all',
        args: 'after-used',
        ignoreRestSiblings: false
      }
    ],
    'vue/html-indent': [
      'error',
      2,
      {
        attribute: 1,
        baseIndent: 1,
        closeBracket: 0,
        alignAttributesVertically: true,
        ignores: []
      }
    ],
    'vue/max-attributes-per-line': ['off'],
    'vue/no-setup-props-destructure': 'off',
    camelcase: ['error', { properties: 'always' }]
  }
}

.prettierrc.json

javascript 复制代码

{
  "semi": false,
  "tabWidth": 2,
  "singleQuote": true,
  "printWidth": 100,
  "trailingComma": "none"
}

package.json文件添加两个脚本，用来在编译前检查一下代码

javascript 复制代码

 "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
 "prettier": "prettier --write src/"

package.json

javascript 复制代码

{
  "name": "vite-project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc -b && vite build",
    "preview": "vite preview",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
    "prettier": "prettier --write src/"
  },
  "dependencies": {
    "axios": "^1.7.7",
    "lodash": "^4.17.21",
    "mockjs": "^1.1.0",
    "vue": "^3.4.37",
    "vue-router": "^4.4.3"
  },
  "devDependencies": {
    "@types/lodash": "^4.17.7",
    "@types/node": "^22.5.4",
    "@typescript-eslint/eslint-plugin": "^8.5.0",
    "@typescript-eslint/parser": "^8.5.0",
    "@vitejs/plugin-vue": "^5.1.2",
    "@vue/eslint-config-prettier": "^9.0.0",
    "@vue/eslint-config-typescript": "^13.0.0",
    "autoprefixer": "^10.4.20",
    "eslint": "8.57.0",
    "eslint-define-config": "^2.1.0",
    "eslint-plugin-prettier": "^5.2.1",
    "eslint-plugin-vue": "^9.28.0",
    "path": "^0.12.7",
    "postcss": "^8.4.45",
    "prettier": "^3.3.3",
    "tailwindcss": "^3.4.10",
    "typescript": "^5.5.3",
    "vite": "^5.4.1",
    "vite-plugin-mock": "^3.0.2",
    "vue-tsc": "^2.0.29"
  }
}