vue3+ts+eslint+prettier配置

关于团队代码规范, 前端基本上都是围绕eslint为基础进行方案设计的. 而目前的主流方案一般都会加上prettier

关于prettier和eslint的区别

许多文章已经讲的很好了, 在这里只是简单在提及一下

eslint: 代码质量检查, 检查不符合要求的代码语法错误, 比如使用了未声明的变量等
prettier: 规范代码风格, 例如单双引号, 结尾是否加分号等

eslint也有一定的代码风格检查能力, 但是不及prettier全面和专业, 因为prettier不仅可以规范js,还有html,css等

关于npm包以及vscode插件的作用

简单理解, npm包是为运行命令而使用的, 而vscode插件则可以在代码编写阶段就帮助你显示错误信息,或者是帮助你进行代码格式化

关于`eslint-plugin-prettier`和`eslint-config-prettier`

之前一直不太理解这两个包的作用区别, 只知道eslint与prettier的规则存在一些冲突的地方,这两个包是为解决这些冲突问题而存在的,在看了一些文档之后, 这里说一下个人的简单理解

eslint-config-prettier: 关闭所有不必要的或可能与Prettier冲突的规则, 是一个规则集
eslint-plugin-prettier: 仅仅使用eslint-config-prettier, 还需要增加一些配置才能让eslint运行eslint-config-prettier中的规则并报错, 使用eslint-plugin-prettier相当于省略了那些配置

注意eslint-plugin-prettier依赖prettier

结合vue3+ts的配置参考

package.json

{
  "name": "tools-h5-static",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "moment": "^2.29.1",
    "vant": "^3.4.5",
    "vue": "^3.2.25",
    "vue-eslint-parser": "^8.3.0",
    "vue-router": "^4.0.12"
  },
  "devDependencies": {
    "@types/node": "^17.0.21",
    "@typescript-eslint/eslint-plugin": "^5.14.0",
    "@typescript-eslint/parser": "^5.14.0",
    "@vitejs/plugin-vue": "^2.2.0",
    "autoprefixer": "^10.4.2",
    "eslint": "^8.9.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^8.4.1",
    "less": "^4.1.2",
    "postcss-px-to-viewport": "^1.1.1",
    "prettier": "2.6.0",
    "typescript": "^4.6.2",
    "vite": "^2.8.0",
    "vite-plugin-style-import": "^1.4.0",
    "vue-tsc": "^0.32.1"
  }
}

.eslintrc.js

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
    es6: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
  ],
  parser: 'vue-eslint-parser',
  parserOptions: {
    ecmaVersion: 13,
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
  },
  rules: {
    'vue/multi-word-component-names': 0,
  },
}

注意需要配置parser和parserOptions才能顺利解析vue文件及ts文件
注意plugin:prettier/recommended一定要放在规则的最后

自动保存格式化

涉及到的vscode插件: eslint, prettier-code formatter, Vue Language Features (Volar)

有手动格式化代码习惯的同学, 只需在安装prettier插件后, 将编辑器的默认格式化工具设置为prettier即可, 设置的方法很简单, 安装完插件后一般会让选择

没有手动格式化代码习惯的同学, 可以在vscode的setting.json中配置"editor.formatOnSave": true