vue项目中配置 Eslint + Prettier

在项目协同开发的过程中 常常会遇到由于编码规范不同，而造成的冲突问题，为了解决这一问题，便出现了统一的编码规范。但是开发人员无法在开发过程中兼顾编码规范。那么有没有一种方式，在我们编码完成保存后，自动校验并格式化代码呢？！ Eslint+Prettier 就可以做到。

本文章以 vue-cli vue2 项目为例。

首先我们需要在VsCode中安装插件

• Eslint

是一个代码检查工具，用来检查你的代码是否符合指定的规范

• Prettier

是一个用来格式化代码的工具，或者称为包或插件。它的作用就是”格式化代码“，使代码更加整齐、易读。

• Vetur

适用于vue2语法，用来让vscode识别.vue文件，实现语法高亮

项目安装依赖

// package.json
{
	...
	"devDependencies": {
		...
		"@babel/eslint-parser": "^7.12.16",
    	"@vue/cli-plugin-eslint": "~5.0.0",
		"eslint": "^7.32.0",
    	"eslint-plugin-vue": "^8.0.3",
		"eslint-plugin-prettier": "^4.2.1",
		"@vue/eslint-config-prettier": "^7.1.0",
	}
}

npm i

配置 .eslintrc.js 文件

// https://eslint.bootcss.com/docs/user-guide/configuring
module.exports = {
    // 默认情况下，ESLint 会在所有父级目录里寻找配置文件，一直到根目录。ESLint 一旦发现配置文件中有 "root": true，它就会停止在父级目录中寻找。相当于一个检索标识
    // https://eslint.bootcss.com/docs/user-guide/configuring#configuration-cascading-and-hierarchy
    root: true,

    // 要在配置文件里指定环境，使用 env 关键字指定你想启用的环境，并设置它们为 true。
    // https://eslint.bootcss.com/docs/user-guide/configuring#specifying-environments
    env: {
        node: true,
    },

    // 扩展 https://eslint.bootcss.com/docs/user-guide/configuring#extending-configuration-files
    extends: ["plugin:vue/essential", "plugin:vue/recommended", "eslint:recommended", "@vue/prettier"],

    // ESLint 允许你指定你想要支持的 JavaScript 语言选项。
    // https://eslint.bootcss.com/docs/user-guide/configuring#specifying-parser-options
    parserOptions: {
        parser: "@babel/eslint-parser", //https://eslint.bootcss.com/docs/user-guide/configuring#specifying-parser
    },

    // 规则 https://eslint.bootcss.com/docs/user-guide/configuring#configuring-rules
    rules: {
        "vue/multi-word-component-names": [
            "error",
            {
                ignores: ["index"],
            },
        ],
        "vue/require-default-prop": "off",
        "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
        "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    },
};

配置 .prettierrc.js 文件

module.exports = {
    // 1.一行代码的最大字符数，默认是80(printWidth: <int>)
    printWidth: 120,
    // 2.tab宽度为4空格(tabWidth: <int>)
    tabWidth: 4,
    // 3.是否使用tab来缩进，我们使用空格(useTabs: <bool>)
    useTabs: false,
    // 6.object对象中key值是否加引号（quoteProps: "<as-needed|consistent|preserve>"）as-needed只有在需求要的情况下加引号，consistent是有一个需要引号就统一加，preserve是保留用户输入的引号
    quoteProps: "consistent",
    // 9.object对象里面的key和value值和括号间的空格(bracketSpacing: <bool>)
    bracketSpacing: true,
    // 11.箭头函数单个参数的情况是否省略括号，默认always是总是带括号（arrowParens: "<always|avoid>"）
    arrowParens: "always",
    // 18. vue script和style标签中是否缩进,开启可能会破坏编辑器的代码折叠
    vueIndentScriptAndStyle: false,
    // 19.    endOfLine: "<lf|crlf|cr|auto>" 行尾换行符,默认是lf,
    endOfLine: "lf",
};

注意事项
prettierrc的优先级高于eslint
如果修改了.prettierrc的配置选项，会发现 eslint 和 prettier又冲突了，这是因为vscode插件缓存没有及时更新，重启下vscode即可。

项目中根目录下 .vscode 的配置

┌─根目录
│  ├─.vscode
│  │  └─settings.json

{
  // 开启eslint自动修复js/ts/jsx/tsx功能
  "eslint.format.enable": true,
  // 将prettier设置为默认格式化程序(在编辑器中有可能被其他Formatter占用，所以将prettier设置为默认Formatter)
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // 关闭js/ts的默认format,统一用eslint进行格式化（tslint已经不维护了，所以转eslint吧）
  "javascript.format.enable": false,
  "typescript.format.enable": false,
  // 关闭vetur的js/ts/html的formatter。html用eslint-plugin-vue格式化。
  // js/ts程序用eslint，防止vetur中的prettier与eslint格式化冲突
  "vetur.format.defaultFormatter.html": "none",
  "vetur.format.defaultFormatter.js": "none",
  "vetur.format.defaultFormatter.ts": "none",
  // 保存时自动格式化 (根据根目录下‘.prettierrc文件配置项’)
  "editor.formatOnSave": true,
  // Enable per-language
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
  },
  // 什么类型的文件需要遵守stylelint规则
  "stylelint.validate": [
    "vue",
    "scss",
    "css",
  ],
  // 为ESLint启用“保存时自动修复”，并且仍然具有格式和快速修复功能
  "editor.codeActionsOnSave": {
    "source.fixAll": true,
  },
}

在package.json文件中我们也可以配置一个eslint修复项目的命令

{
	...
	"scripts": {
		...		    
		"lint": "eslint --fix --ext .js,.vue src/"
	},
}

⚠️注意：
不需要校验格式话的文件，我们可以创建ignore文件来进行管理，类似git的 .gitignore 文件。