vite2生成vue项目并使用typescript配置eslint格式化检查配合prettier格式化代码

初始化项目

yarn create vite my-vue-app --template vue-ts

添加Eslint

npx eslint --init

捕获.PNG

检测下eslint 是否生效

package.json文件里添加 script

"lint": "eslint . --ext .ts,.vue"

eslint 默认只检测.js的文件， 所以需要 --ext 来指定文件类型

修改下配置来适配vue3

看下eslint-plugin-vue官方地址
在.eslintrc.js中

1. 删除extends里的"plugin:vue/essential"
2. 删除plugins里的"vue"去掉
3. 添加vue3的配置'plugin:vue/vue3-recommended'

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended'，
    'plugin:vue/vue3-recommended'
  ],
  parserOptions: {
    ecmaVersion: '2021',
    parser: '@typescript-eslint/parser',
    sourceType: 'module'
  },
  plugins: ['@typescript-eslint'],
  rules: {}
}

添加 prettier

yarn add -D prettier eslint-config-prettier

修改下.eslintrc.js

module.exports = {
  ...,
  extends: [
    ...,
    'prettier',
  ],
  ...
}

创建.prettierrc.js

module.exports = {
  // printWidth: 80,
  // tabWidth: 2,
  // useTabs: false,
  semi: false, // 未尾逗号, default:  true
  singleQuote: true, // 单引号 default: false
  // quoteProps: 'as-needed',
  // jsxSingleQuote: false,
  trailingComma: 'none', // 未尾分号 default: es5    all | none | es5
  // bracketSpacing: true,
  // bracketSameLine: false,
  // jsxBracketSameLine: false,
  arrowParens: 'avoid', // default: always
  // insertPragma: false,
  // requirePragma: false,
  proseWrap: 'never',
  // htmlWhitespaceSensitivity: 'css',
  // vueIndentScriptAndStyle: false,  // .vue 缩进
  endOfLine: 'auto' // default lf
}

prettier 有两种方案

• prettier 和 eslint-config-prettier 配置的化直接.eslintrc.js extends里加上'prettier'
• 再安装eslint-plugin-prettier(推荐使用) 配置 extends: ['plugin:prettier/recommended']

添加Lint-staged husky

yarn add -D lint-staged husky
yarn set-script prepare "husky install"
yarn run prepare

npx husky add .husky/pre-commit "npx lint-staged"

给package.json里修改些相应的内容

 ...
  "lint": "eslint . --ext .ts,.vue --fix"
 ...
 "lint-staged": {
    "*.{ts,vue}": [
      "prettier --write .",
      "npm run lint"
    ]
  }