背景描述
以前一直用破解版的Webstorm,没有用过VSCode,到新公司后不让用盗版软件了,自己捣鼓了一下VSCode。配置ESLint、Prettier代码格式化的时候,遇到了大坑!!!!保存后,莫名其妙的又被格式化成4个空格的,整整纠结了2天都没解决。直到遇到了这个文章才解决:解决VS Code保存时候自动格式化_一汀程序狗的博客-CSDN博客_vscode保存时自动格式化不知道从哪个版本起,VS code 保存会自动格式化。以前都是alt+shift+F格式化的,现在一保存就格式化,而且html什么全都乱了,react项目也没法写,悲伤的我难道要转webstorm嘛?如何解决呢,操作如下:于是我找到设置,搜索关键字:“格式化”或者“保存”,然后配置了两个参数, "editor.formatOnType": false,和"editor.formatOnSavehttps://blog.csdn.net/qq_35800306/article/details/72784164
都是JS-CSS-HTML Formatter这个垃圾插件导致的。。。VSCode给排到了第一。。。也是不懂下载了。导致后面跟项目中的ESLint、Prettier起了冲突,卸载了就好了。看评论,骂声一片!!!
正文开始(VSCode中ESLint、Prettier的配置)
1、安装可参考:vite2+eslint+prettier_蓝色之恋love的博客-CSDN博客
2、ESLint的配置文件:.eslintrc.js
module.exports = {
root: true,
env: {
browser: true,
node: true,
es6: true
},
extends: ['plugin:vue/vue3-recommended', 'eslint:recommended', '@vue/standard', '@vue/prettier'], // "@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',
'prettier/prettier': 'off',
'vue/max-attributes-per-line': [2, {
'singleline': 10,
'multiline': {
'max': 1
}
}],
'vue/name-property-casing': ['error', 'PascalCase'],
// 定义对象的set存取器属性时,强制定义get
'accessor-pairs': 2,
'arrow-spacing': [2, {
'before': true,
'after': true
}],
// 禁止或强制在单行代码块中使用空格
'block-spacing': [2, 'always'],
// 强制使用一致的缩进 第二个参数为 "tab" 时,会使用tab
'brace-style': [2, '1tbs', {
'allowSingleLine': true
}],
// 双峰驼命名格式
'camelcase': [0, {
'properties': 'always'
}],
// 数组和对象键值对最后一个逗号, never参数:不能带末尾的逗号, always参数:必须带末尾的逗号
'comma-dangle': [2, 'never'],
//