VSCode⾃动修改和保存代码风格==eslint+prettier 最近因为⽤到VS Code，需要统⼀所有⼈的代码风格（前端语⾔js/html/css等，或者后端语⾔ go/python等也可以这么⽤）。所以参考了⼀些⽹络资料，记录下设置步骤，以便后续查阅。
Step 1: npm 命令窗⼝，安装需要的插件
cmd >> npm i -D prettier
# eslint-plugin-prettier插件会调⽤prettier对你的代码风格进⾏检查，其原理是先使⽤prettier对你的代码进⾏格式化，
# 然后与格式化之前的代码进⾏对⽐，如果过出现了不⼀致，这个地⽅就会被prettier进⾏标记。
cmd >> npm i -D eslint-plugin-prettier
# eslint-config-prettier可以关闭eslint可能与prettier发⽣冲突的代码格式化规则。
# 官⽅称eslint-plugin-prettier需要与eslint-config-prettier搭配⾷⽤才能获得最佳效果。
cmd >> npm i -D eslint-config-prettier
judged
Step 2: 创建react项⽬
attachtocmd >> cd H:\0_VSCode_Work
cmd >> create-react-app my-app-03
# 打开项⽬
cmd >> cd ./my-app-03
cmd >> code .
Step 3: 创建项⽬的.eslintignore⽂件
# ⽂件路径 = MY-APP-03/.eslintignore
销售工作总结报告# 在vs code中⼿动创建⽂件后".eslintignore"，输⼊如下⽂件内容。
/build/insideman
/config/
/
dist/
/*.js
/test/unit/coverage/
Step 4: 创建项⽬的.eslintrc.js⽂件
# ⽂件路径 = MY-APP-03/src/.eslintrc.js
# 在vs code中⼿动创建⽂件后".eslintrc.js"，输⼊如下⽂件内容。
root: true,
env: {
browr: true,
es6: true,
node: true
},
extends: [
唯爱的英文
'standard',
'plugin:vue/esntial',
'eslint:recommended',
"plugin:prettier/recommended"
],
rules: {
"prettier/prettier": "error",
// allow async-await
'generator-star-spacing': 'off',
'no-console': v.NODE_ENV === 'production' ? 'error' : 'off',
// allow debugger during development
'no-debugger': v.NODE_ENV === 'production' ? 'error' : 'off',
//强制使⽤单引号
quotes: ['error', 'single'],
//强制不使⽤分号结尾
mi: ['error', 'never']
},
parrOptions: {
parr: 'babel-eslint'
}
}
Step 5: 创建项⽬的.prettierrc⽂件
# ⽂件路径 = MY-APP-03/.prettierrc
# 在vs code中⼿动创建⽂件后".prettierrc"，输⼊如下⽂件内容。
{
//⼀⾏的字符数，如果超过会进⾏换⾏，默认为80
"printWidth": 80,
//⼀个tab代表⼏个空格数，默认为80
"tabWidth": 2,
//是否使⽤tab进⾏缩进，默认为fal，表⽰⽤空格进⾏缩减
"uTabs": fal,
//字符串是否使⽤单引号，默认为fal，使⽤双引号
"singleQuote": fal,
//⾏位是否使⽤分号，默认为true
"mi": true,
//是否使⽤尾逗号，有三个可选值"<none|es5|all>"
"trailingComma": "none",
//对象⼤括号直接是否有空格，默认为true，效果：{ foo: bar }
"bracketSpacing": true,
//代码的解析引擎，默认为babylon，与babel相同
"parr": "babylon",
/
/开启 eslint ⽀持
"eslintIntegration": true
}
Step6 : 修改项⽬⼯作区设置⽂件.vscode/ttings.json
# 单击IDE⼯具的左下⾓的齿轮，然后单击菜单"Settings", 在弹出的⾯板Settings中，选择⼦⾯板"Workspace"，如下图# 然后，找到参数"Files:Associations"，单击按钮"Edit in tting.json"
大学英语四级单词
# 然后，在ttings.json⽂件中，输⼊和保存如下内容。
{
//.vue⽂件template格式化⽀持，并使⽤js-beautify-html插件
"vetur.format.defaultFormatter.html": "js-beautify-html",
//js-beautify-html格式化配置，属性强制换⾏因人而异 英语
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned"
}
},
//根据⽂件后缀名定义vue⽂件类型
"files.associations": {
"*.vue": "vue"
},
//配置 ESLint 检查的⽂件类型
understand"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
],
//保存时eslint⾃动修复错误
"eslint.autoFixOnSave": true,
//保存⾃动格式化
"editor.formatOnSave": true
}
或者，少设置⼀些参数，如下
最后，记得保存ttings.json⽂件
Step7 : 最后，我们测试⼀下效果
# ⾸先，创建⼀个demo.html⽂件，如下
⽂件路径 = MY-APP-03/public/demo.html
<html>dafs
<header>
demo
</header>
<body>
<div>乱写⼀⽓，----001
</div>
<div>乱写⼀⽓，----002
</div>
</body>accessible
killer</html>
# 然后，我们单击快捷键"Ctrl+S" 或菜单"Fiel >> Save All", 则IDE⼯具⾃动将上⾯格式混乱的代码转化为风格整洁的代码，如下图所⽰
