1.安装eslint和prettier的node模块
cnpm install eslint prettier --save-dev
cnpm install eslint-plugin-prettier --save-dev
2.安装eslint和prettier插件，在vs code里面。
3.插件eslint设置
{
// vscode默认启用了根据文件类型自动设置tabsize的选项
"editor.detectIndentation": false,
// 重新设定tabsize
"editor.tabSize": 4,
// #每次保存的时候自动格式化
//"editor.formatOnSave": true,
// #每次保存的时候将代码按eslint格式进行修复
// "eslint.autoFixOnSave": true,
//上面是老版本设置，下面是新版本设置
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.codeActionsOnSaveTimeout": 5000,
// 保存时自动格式化
"editor.formatOnSave": false,
// 添加 vue 支持
// "eslint.validate": [
// "javascript",
// "javascriptreact",
// {
// "language": "vue",
// "autoFix": true
// }
// ],
//上面是格式化的老版本设置，下面是新版本的设置
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
"vue"
],
// #让prettier使用eslint的代码格式进行校验
"prettier.eslintIntegration": true,
// #去掉代码结尾的分号
"prettier.semi": false,
// #使用带引号替代双引号
"prettier.singleQuote": true,
// #让函数(名)和后面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// #这个按用户自身习惯选择
"vetur.format.defaultFormatter.html": "js-beautify-html",
// #让vue中的js按编辑器自带的ts格式进行格式化
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned"
// #vue组件中html代码格式化样式
}
},
// "editor.codeActionsOnSave": {
// "source.fixAll.eslint": true
// },
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"eslint.runtime": "",
"eslint.codeAction.showDocumentation": {
"enable": true
},
}
4..eslintrc.js设置
parser问题：
如果使用其他通用parsers，如babel-eslint，需要把他写在parserOptions.parser里面而不是parser选项里
因为eslint-plugin-vue需要vue-eslint-parser解析器.vue文件。重写parser选项会导致eslint-plugin-vue不能使用。
module.exports = {
root: true,
parserOptions: {
sourceType: 'module'
parser: 'babel-eslint'
},
env: {
browser: true,
},
//扩展vue插件设置，否则vue文件里面会报错
//extends里面有'plugin:vue/recommended'相当于多设置了"parser": "vue-eslint-parser"。
extends: ["vue", "standard", "plugin:vue/recommended"],
// required to lint *.vue files
plugins: [
'html'
],
// add your custom rules here
'rules': {
// allow paren-less arrow functions
'arrow-parens': 0,
// allow async-await
'generator-star-spacing': 0,
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
'eol-last': 0,
'space-before-function-paren': 0
}
}
5.详细说明参考地址
https://www.cnblogs.com/liangsf/p/11525048.html