目录
一、插件安装
01、ESLint
02、Prettier
03、Vetur
04、EditorConfig
二、安装依赖
01、安装 ESlint 的依赖
02、安装 Prettier 依赖
三、配置
01、配置ESlint
02、配置Prettier（局部的只对本项目有效）
03、配置VScode中的setting（全局的都每个项目都采用该配置）
04、配置编辑器
一、插件安装
01、ESLint
用来识别并检查ECMAScript/JavaScript 代码的工具
02、Prettier
用来格式化代码，如.js、.vue、css等都可以进行格式化
03、Vetur
用来识别并高亮vue语法
04、EditorConfig
用来设置vscode的编程行为
二、安装依赖
01、安装 ESlint 的依赖
npm i -D eslint babel-eslint eslint-plugin-vue @vue/cli-plugin-eslint
- eslint ：ESlint 的核心代码
- babel-eslint：eslint和babel的整合包
- eslint-plugin-vue @vue/cli-plugin-eslint：eslint和vue的整合包
02、安装 Prettier 依赖
适应vue3以下：
npm i -D prettier eslint-plugin-prettier eslint-config-prettier prettier-eslint-cli
- prettier：Prettier的核心代码
- eslint-plugin-prettier：将prettier作为ESLint规范来使用
- eslint-config-prettier：解决 ESLint 中的样式规范和 prettier 中样式规范的冲突，以 prettier 的样式规范为准，使 ESLint 中的样式规范自动失效
- prettier-eslint-cli：prettier-eslint-cli 允许你对多个文件用 prettier-eslint 进行格式化
适用vue3：
npm i -D prettier eslint-plugin-prettier @vue/eslint-config-prettier
三、配置
01、配置ESlint
在项目的根目录下，新建.eslintrc.js 文件：
module.exports = {root: true,env: {node: true,},extends: ["plugin:vue/vue3-essential", "eslint:recommended", "@vue/prettier"],parserOptions: {parser: "babel-eslint",},rules: {"no-console": process.env.NODE_ENV === "production" ? "warn" : "off","no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"}
};
02、配置Prettier（局部的只对本项目有效）
在项目的根目录下创建.prettierrc.js 文件：
module.exports = {printWidth: 200, // 行长规则通常设置为100或120tabWidth: 2, // tab缩进大小, 默认为2useTabs: false, // 使用tab缩进, 默认falsesemi: false, // 行末分号, 默认truesingleQuote: true, // 使用单引号, 默认falsequoteProps: "as-needed", // 仅在需要时在对象属性周围添加引号, 默认'as-needed'trailingComma: "none", // 结尾是否强制添加逗号，默认none, 可选 none|es5|allbracketSpacing: true, // 对象中的空格, 默认truejsxSingleQuote: false, // jsx中是否使用单引号, 默认falsejsxBracketSameLine: false, // 在jsx中把'>' 是否单独放一行, 默认falseendOfLine: "lf", // 定义结尾换行符 \n \r \n\r，默认autoarrowParens: "avoid", // (x) => {} 箭头函数参数只有一个时是否要有小括号, avoid: 省略括号vueIndentScriptAndStyle: false // vue文件的script标签和Style标签下的内容需要缩进, 默认false
};03、配置VScode中的setting（全局的都每个项目都采用该配置）
更改配置，使其在保存时会进行自动格式化：
settings.json文件，Mac用户可以按快捷键command+shift+p，window用户好像是alt+shift+p调用出搜索框输入settings.json文件即可
或者在settings.json补充：
{"editor.formatOnSave": true,"editor.formatOnType": true,"editor.codeActionsOnSave": {"source.fixAll.eslint": true},"vetur.format.defaultFormatter.html": "prettier","[css]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[scss]": {"editor.defaultFormatter": "esbenp.prettier-vscode"}
}
注意：在 vscode 中其实 Vetur 也有一套 Format 规则，因此会和 prettier 冲突。
打开 setting-扩展-Vetur 将 Vetur 的规则改成 Prettier 就行了。
如果有需要忽略的文件可以在 .eslintignore 文件中进行配置。
04、配置编辑器
在项目的根目录下创建.editorconfig 文件：
root = true[*]
charset = utf-8
end_of_line = lf
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true[*.md]
trim_trailing_whitespace = false