1、vue create 项目名创建项目时选择自定义创建，会询问你是否安装eslint，我选择了ESLint + Prettier方式；他会默认下载 "eslint","babel-eslint","eslint-plugin-prettier","eslint-plugin-vue","@vue/eslint-config-prettier"等插件
2、创建项目时你会选择1种直接在package.json中生成eslint配置即字段eslintConfig里面（个人不喜欢这个方式。你对写的东西不方便备注），还有一种就是在项目下面创建一个.eslintrc.js文件里面配置你的eslint配置
3、如下是我个人配置的.eslintrc.js：
module.exports = {
// 默认情况下，ESLint会在所有父级组件中寻找配置文件，一直到根目录。ESLint一旦发现配置文件中有 "root": true，它就会停止在父级目录中寻找。
root: true,
// 该配置属性定义来一组预定义的全局变量。这些环境并不是互斥的，所以你可以同时定义多个。
env: {
node: true,
},
// extends是扩展插件的意思,用来配置vue.js风格
extends: [
"plugin:vue/essential", // 全称 eslint-plugin-vue
"@vue/prettier", // 全称 eslint-plugin-prettier
],
// ESLint 支持使用第三方插件。在使用插件之前，你必须使用包管理工具安装它。
// 在配置文件里配置插件时，可以使用 plugins 关键字来存放插件名字的列表。
// 插件名称可以省略 eslint-plugin- 前缀。
plugins: ["vue"],
// 额外的全局变量。我们使用第三方提供的全局变量的时候（例如：jQuery,AMap 等对象），
// ESLint 并不能识别他们，总是会报错。这个时候，该配置的作用就出现了。
// 使用 globals 指出你要使用的全局变量。将变量设置为 true 将允许变量被重写，或 false 将不允许被重写。
globals: {
// $: false,
// jquery: false,
// AMap: false
},
// ESLint 的规则。你可以使用注释或配置文件修改你项目中要使用的规则。
// rules：开启规则和发生错误时报告的等级，规则的错误等级有三种：
// 0 或'off'：关闭规则。
// 1 或'warn'：打开规则，并且作为一个警告（并不会导致检查不通过）。
// 2 或'error'：打开规则，并且作为一个错误（退出码为1，检查不通过）
rules: {
// allow debugger during development
"no-console": process.env.NODE_ENV === "production" ? "error" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
"prettier/prettier": [
"error",
{
semi: false, // 是否使用分号, 默认true
singleQuote: true, // 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号)
},
],
},
parserOptions: {
parser: "babel-eslint",
},
};
4、vscode需要安装几个格式化插件：Beautify，ESLint，Vetur，Prettier - Code formatter，然后点击文件=>首选项=>设置会有用户设置和工作区设置建议保存在工作区设置以便大家共享
5、工作区设置后会在项目下生成一个.vscode文件夹下面有setting.json以下是我的配置：
{
// 把eslint保存在工作区，方便大家共享
// 配置eslint
"vetur.validation.template": false,
// vscode默认启用了根据文件类型自动设置tabsize的选项
"editor.detectIndentation": false,
//关闭Vetur的linting功能
// "vetur.validation.template": false,
// 重新设定tabsize
"editor.tabSize": 2,//制表符符号eslint
// #让函数(名)和后面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// #这个按用户自身习惯选择
"vetur.format.defaultFormatter.html": "js-beautify-html",//格式化.vue中html
"vetur.format.defaultFormatter.ts": "none",
// #让vue中的js按编辑器自带的ts格式进行格式化
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "auto", //属性强制折行对齐
"end_with_newline": false,
},
"prettier": {
"semi": false, // #去掉代码结尾的分号
"singleQuote": true // #使用带引号替代双引号
}
},
// 每次保存的时候自动格式化（建议关掉，用eslint来修复）
"editor.formatOnSave": false,
//旧版本配置
// 每次保存的时候将代码按eslint格式进行修复
// "eslint.autoFixOnSave": true,
// 添加 vue 支持
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
"vue",
],
"eslint.options": {
"extensions": [
".js",
".vue"
]
},
//新版本配置
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
// "vetur.format.options.tabSize": 2,
// 文件头部注释
"fileheader.customMade": {
"Descripttion": "",
"version": "",
"Author": "Mr.fang",
"Date": "Do not edit",
"LastEditors": "Mr.fang",
"LastEditTime": "Do not Edit"
}, //函数注释
"fileheader.cursorMode": {
"name": "",
"test": "test font",
"msg": "",
"param": "",
"return": ""
},
}
----------以上都是我的配置，有问题的欢迎来问我-----------
网友评论