Foreword
VSCode had undergone a violent escalation after a user-defined file settings.json
, there has been relatively large changes, many plugins home page also wrote a method of changing the relevant settings.
This article is another big blog modify the code set by the user on the basis of the exclusion of error parts and obsolete parts
Thanks greatly!
step
- According https://www.cnblogs.com/zhoudawei/p/11198781.html download the appropriate plug-in and open the configuration file
- The final modified code as follows:
(If previously settings.json
there have code, please remove the outermost following piece of code braces {}
)
{
// #值设置为true时,每次保存的时候自动格式化;值设置为false时,代码格式化请按shift+alt+F
"editor.formatOnSave": false,
//设置tab的缩进为2
"editor.tabSize": 2,
// #每次保存的时候将代码按eslint格式进行修复
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
},
// 添加 vue 支持
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
],
// #让prettier使用eslint的代码格式进行校验
// vscode 更新后已经统一使用editor.codeActionsOnsave
// #去掉代码结尾的分号
"prettier.semi": false,
// #使用带引号替代双引号
"prettier.singleQuote": true,
"prettier.tabWidth": 4,
// #让函数(名)和后面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// #这个按用户自身习惯选择
"vetur.format.defaultFormatter.html": "js-beautify-html",
// #让vue中的js按"prettier"格式进行格式化
"vetur.format.defaultFormatter.js": "prettier",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
// #vue组件中html代码格式化样式
"wrap_attributes": "force-aligned", //也可以设置为“auto”,效果会不一样
"wrap_line_length": 200,
"end_with_newline": false,
"semi": false,
"singleQuote": true
},
"prettier": {
"semi": false,
"singleQuote": true
}
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// 格式化stylus, 需安装Manta's Stylus Supremacy插件
"stylusSupremacy.insertColons": false, // 是否插入冒号
"stylusSupremacy.insertSemicolons": false, // 是否插入分号
"stylusSupremacy.insertBraces": false, // 是否插入大括号
"stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
"stylusSupremacy.insertNewLineAroundBlocks": false,
"prettier.useTabs": true,
"files.autoSave": "off",
"explorer.confirmDelete": false,
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"diffEditor.ignoreTrimWhitespace": false,
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
} // 两个选择器中是否换行
}
ps. the effect of this change is to make VSCode not being given, whether before the function can truthfully take effect, please self-test orz
Supplementary encountered problems and their solutions
Use ESlint
plug-ins may experience problems could not be loaded:
You will be prompted to use npm
manual installation, then manually install it:
- Download
Node.js
and install it. (The main problem is to download a long time ago, specifically how to install it at Baidu) - Open a terminal. Note that this time the input
npm install eslint -g
is likely to have been stuck in the download interface motionless. The correct way is to replace Taobao source - Enter the
npm config set registry https://registry.npm.taobao.org
source exchange, then enternpm config get registry
check whether success - Enter the
npm install eslint -g
installationESLint
.
There may be follow-up questions, such as the main problem to figure out another update orz eslint