vscode + eslint + prettier 配置
配置目标:能够使用 alt + ctrl + f 对代码进行格式化,并配置 eslint 规则保持与 vscode 一致. 并且能够自动 import 包,自动删除 未使用的多余 import 语句。
使用 vscode 格式化时真是头疼,prettier 和 eslint 的规则总吃撞车, 刚 ctrl+s 保存自动格式化,立刻又按照另一种规则给格式化了。
好好研究了一番,发现代码规范实在不用那么复杂,因为目前网上流行的配置是 vue-element-admin 中那一套配置,几年过去,其实没必要那么复杂了
文章尾部有 .prettierrc 配置文件 和 eslint.js 配置,可以直接 copy 到项目中使用
vscode 的快捷键alt + ctrl + f到底是如何格式化的?
vscode 的一旦安装了 prettier 插件,那么扩展 prettier-vscode 会读取 .prettierrc,但不会从 ESLint 读取配置
正是因为这个原因,在使用默认格式化快捷键alt + ctrl + f格式化时,只会读取 prettier,不会去读取你的项目 eslint 配置文件,
当两者混用时(安装了这 eslint 和 prettier 插件),那么就在 eslint.js文件中添加上这一句
rules:{
"prettier/prettier": ["error", {"singleQuote": true, "parser": "flow"}],
}
关于 <script> 和 <style> 中的代码初次缩进问题
vscode 中的的默认规则是缩进这两部分其中的内容,原因来自于开发者投票,说实话我很不认可这投票,不过为了迎合 vscode 的 alt + shift +f 格式化代码的规则,不得不妥协我的规范。
缩进的 .eslintrc.js配置如下(文档在这)
module.exports = {
...
extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'],
...
rules: {
indent: 'off',
'vue/script-indent': [
'error',
2,
{
baseIndent: 1,
switchCase: 1,
ignores: []
}
],
}
}
以下是 <script> 和 <style> 标签缩进与未缩进的example 对比
缩进 :
<script>
import { defineComponent, computed } from 'vue';
import { useStore } from 'vuex';
export default defineComponent({
name: 'App',
setup() {
const store = useStore();
const greyMode = computed(() => store.state.app.greyMode);
return {
greyMode
};
}
});
</script>
<style>
.size {
min-width: $minWidth;
width: 100%;
height: 100%;
}
</style>
不缩进
<script>
import { defineComponent, computed } from 'vue';
import { useStore } from 'vuex';
export default defineComponent({
name: 'App',
setup() {
const store = useStore();
const greyMode = computed(() => store.state.app.greyMode);
return {
greyMode
};
}
});
</script>
<style>
.size {
min-width: $minWidth;
width: 100%;
height: 100%;
}
</style>
1. .prettierrc 配置文件
使用 .prettierrc (✔)格式文件,vscode 会给出可用的配置提示,不要使用 js 格式,例如.prettierrc.js(×)
.prettierrc 这种类型文件其实就是 json 格式,所以记住
json格式,vscode能给出可用配置项提示
{
"useTabs": false,
"tabWidth": 2,
"endOfLine": "auto",
"printWidth": 80,
"semi": true,
"singleQuote": true,
"quoteProps": "as-needed",
"proseWrap": "preserve",
"arrowParens": "always",
"bracketSpacing": true,
"htmlWhitespaceSensitivity": "ignore",
"ignorePath": ".prettierignore",
"jsxBracketSameLine": false,
"jsxSingleQuote": false,
"requireConfig": false,
"trailingComma": "none",
"vueIndentScriptAndStyle": true
}
2. eslint.js 配置文件
细心的同学发现了 , 不是说 json 格式有智能提示吗?eslint 配置文件为什么使用的是 js 文件格式。
这是因为,我需要根据当前是 dev 环境还是 prod 环境,去做校验,比如 dev 环境允许 console.log()代码的存在,prod 环境,就不允许,接下来的示例中就用到了 变量 process.env.NODE_ENV
也正是因为 js 文件中含有变数,编辑器是不可能知道里面会有什么东西,所以无法给出提示。
// "off"或 0 - 关闭规则
// "warn"或 1 - 开启规则, 使用警告级别的错误: warn(不会导致程序退出)
// "error"或 2 - 开启规则, 使用错误级别的错误: error(当被触发的时候, 程序会退出)
module.exports = {
root: true,
env: {
browser: true,
node: true,
es6: true,
},
extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'],
parserOptions: {
parser: 'babel-eslint',
sourceType: 'module',
},
// 自定义rules
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'prettier/prettier': ['error', { singleQuote: true, parser: 'flow' }],
'vue/no-unused-components': 'off',
'vue/no-unused-vars': 'off',
'vue/no-multiple-template-root': 'off',
'vue/max-attributes-per-line': [
2,
{
singleline: 10,
multiline: {
max: 2,
allowFirstLine: false,
},
},
],
'vue/singleline-html-element-content-newline': 'off',
'vue/multiline-html-element-content-newline': 'off',
'vue/html-closing-bracket-newline': 'off',
'vue/name-property-casing': ['error', 'PascalCase'],
'vue/no-v-for-template-key-on-child': 'off',
indent: 'off',
'vue/script-indent': [
'error',
2,
{
baseIndent: 1,
switchCase: 1,
ignores: [],
},
],
'comma-dangle': 'off',
quotes: [
'error',
'single',
{
avoidEscape: true,
allowTemplateLiterals: true,
},
],
semi: ['error', 'always'],
'semi-spacing': [
'error',
{
before: false,
after: true,
},
],
},
}
其他可能遇到的问题
cant't find module eslint-plugin-vue 解决办法:降低 "eslint-plugin-vue": "^5.2.3", 版本
delete ⏎ prettier/prettier 解决办法:添加配置rules:{'prettier/prettier': ['error', { endOfLine: 'auto' }]}