前言

目前使用vue开发项目，主流的开发三大件就是vue3+vite+ts了。

当团队协作开发的时候，必然要做到代码格式等统一，此时，esint和prettier就要登场了。

咱们先来讨论一下为啥要用eslint和prettier！

为啥要用eslint？

eslint是一个用于识别和报告ECMAScript/JavaScript中代码格式的工具，目的是使代码风格更加统一和避免错误。eslint的理念是可扩展、每条规则独立、不内置编码风格。

在多人协作时，统一的代码风格更具可读性、可维护性。即使是单人开发，也可以使用eslint来规范自己的书写规范。毕竟，规范化代码也是提升效率的一个方面。

而且，eslint可以集成到主流的编辑器和构建工具中，以便我们在编写的代码的同时进行lint。

为啥要用prettier

prettier是一个代码格式化工具，它可以支持js/jsx/ts/tsx/json/css/scss/less等文件格式。

它可以替代lint中的一些场景，比如说分号/tab缩进/空格/引号，这些在lint工具检查出问题之后还需要手动修改，而通常这样的错误都是空格或者符号之类的，这样相对来说不太优雅，利用格式化工具自动生成省时省力。

eslint和prettier的区别

1. eslint是代码检测工具，可以检测出你代码中潜在的问题，比如使用了某个变量却忘记了定义。
2. prettier是代码格式化工具，作为代码格式化工具，能够统一你或者你的团队的代码风格。
3. 使用 eslint 与 eslint-plugin-prettier 的结果是最终得到的代码是充分尊重 prettier 的结果，而 prettier-eslint 则是先执行 prettier 然后再自动使用 eslint --fix 将与 eslint 规则冲突的代码修正成 eslint 想要的结果。这样其实引入 prettier 不会影响你原有的设置。

我要【完美】

当你自行创建新项目时需要自己安装prettier+eslint包，并做一系列的配置。可是当你百度的时候你会发现给出的答案基本都是碎片，照着这篇文章配置报这个错，又照着那篇文章配置又报那个错，抓瞎啦！！！

求人不如求己，事已至此那就自己来一篇完整的配置文章吧。

开始

首先创建项目 yarn create vite

然后根据提示操作完成，生成目标项目 xxx

下面是package.json中配置的eslint和prettier相关的包：

{
  "name": "xxx",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.47"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.57.0",
    "@typescript-eslint/parser": "^5.57.0",
    "@vitejs/plugin-vue": "^4.1.0",
    "eslint": "^8.37.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-config-standard": "^17.0.0",
    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-promise": "^6.1.1",
    "eslint-plugin-vue": "^9.10.0",
    "prettier": "^2.8.7",
    "prettier-eslint": "^15.0.1",
    "typescript": "^4.9.3",
    "vite": "^4.2.0",
    "vue-eslint-parser": "^9.1.1",
    "vue-tsc": "^1.2.0"
  }
}

命令：yarn add @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-prettier eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-prettier eslint-plugin-promise eslint-plugin-vue prettier prettier-eslint vue-eslint-parser -D

当这些依赖包安装完成后，剩下的就是辅助配置了。

为了使eslint生效，我们需要在根目录创建.eslintrc.cjs文件。（为什么是.cjs？因为要用module.export，可加注释）

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-essential',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended'
  ],
  overrides: [],
  parser: 'vue-eslint-parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    parser: '@typescript-eslint/parser'
  },
  plugins: ['vue', '@typescript-eslint'],
  rules: {
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'vue/multi-word-component-names': 'off',
    'prettier/prettier': 'error',
    '@typescript-eslint/no-explicit-any': 'off'
  }
}

对了，如果某些文件不想做校验，可以创建.eslintignore来屏蔽。

public
node_modules
dist
src/assets/*
build/*

为了个性化prettier，咱们当然也要创建.prettier.cjs。

module.exports = {
  "extends": [
  "airbnb",
  "prettier",
  "prettier/react"
  ],
  "singleQuote": true, // 使用单引号
  "printWidth": 80, // 超过最大值换行
  "htmlWhitespaceSensitivity": "ignore",
  "semi": false, // 结尾不用分号
  "trailingComma": "none", // 函数最后不需要逗号
  "arrowParens": "avoid", // 箭头函数参数只有一个时，不需要括号
  "bracketSpacing": true, // 对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
  "jsxBracketSameLine": false, // 在jsx中把'>' 是否单独放一行
  "jsxSingleQuote": true, // 在jsx中使用单引号代替双引号
  "proseWrap": 'preserve', //代码超出是否要换行 preserve保留
 };

大功告成！

等等，我们还要做团队配置！！！

在.vscode目录下创建settings.json，网上有些大神会教你创建setting.json，一个s之差就没效果。

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.format.enable": true,
  "eslint.validate": [
    "vue",
    "html",
    "javascript",
    "typescript",
    "javascriptreact",
    "typescriptreact",
    "less",
    "css",
    "scss",
    "json",
    "jsonc"
  ],
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

现在就完成了eslint+prettier的配置了。

结束语

记住吧，实在记不住就常来看看吧。