基礎(chǔ)配置欠痴，待完善
介紹
/*格式化文件對(duì)應(yīng)插件：
主要是兩步谈火，一步是用格式化插件格式化對(duì)應(yīng)的文件；
另一步讓格式化后的代碼能通過代碼檢驗(yàn)工具妻献。
prettyhtml格式化HTML；prettier格式化css/less/scss/postcss/ts团赁；
stylus-supremacy格式化stylus育拨；
vscode自帶格式化插件格式化js；
vetur格式化.vue文件欢摄；
ESlint進(jìn)行代碼檢驗(yàn)熬丧。
*/
/*格式化思路和注意事項(xiàng)。
注意格式化的代碼能符合ESlint代碼檢驗(yàn)怀挠。
1.用vetur設(shè)置默認(rèn)格式化工具析蝴。格式化.vue文件
2.用ESlint設(shè)置保存時(shí)修復(fù)ESlint錯(cuò)誤的功能。
3.用prettier格式化css绿淋；去除語法結(jié)尾的分號(hào)闷畸，使用單引號(hào)替換雙引號(hào)。
4.保存時(shí)自動(dòng)格式化吞滞。
*/
最簡(jiǎn)單格式化方法佑菩，防止設(shè)置過多，導(dǎo)致ESlint報(bào)錯(cuò)裁赠。
"vetur.format.defaultFormatter.js": "prettier-eslint",
"vetur.format.defaultFormatterOptions": {
"prettier": {
"semi": false, // 不要分號(hào)
"singleQuote": true // 要單引號(hào)
}
},
// #每次保存的時(shí)候自動(dòng)格式化
"editor.formatOnSave": true,
"window.zoomLevel": 0,//設(shè)置vscode的字體大小和界面縮放殿漠。
基礎(chǔ)配置1
{
"workbench.colorTheme": "One Dark Pro",
"workbench.editor.enablePreview": false,
"workbench.editor.showTabs": true,
"editor.fontSize": 14,
// 默認(rèn)使用prettier格式化支持的文件
"editor.defaultFormatter": "esbenp.prettier-vscode",
// vscode默認(rèn)啟用了根據(jù)文件類型自動(dòng)設(shè)置tabsize的選項(xiàng)
"editor.detectIndentation": false,
// 重新設(shè)定tabsize
"editor.tabSize": 2,
// 保存時(shí)自動(dòng)格式化代碼
"editor.formatOnSave": true,
// eslint配置項(xiàng)，保存時(shí)自動(dòng)修復(fù)錯(cuò)誤佩捞。
"editor.codeActionsOnSave": {
"source.fixAll": true
},
"vetur.format.defaultFormatter.html": "prettyhtml",
"vetur.format.defaultFormatter.css": "prettier",
"vetur.format.defaultFormatter.postcss": "prettier",
"vetur.format.defaultFormatter.scss": "prettier",
"vetur.format.defaultFormatter.less": "prettier",
"vetur.format.defaultFormatter.stylus": "stylus-supremacy",
// "vetur.format.defaultFormatter.js": "prettier",
"vetur.format.defaultFormatter.ts": "prettier",
"vetur.format.defaultFormatter.sass": "sass-formatter",
"open-in-browser.default": "Chrome",
// 將vetur的js格式化工具指定為vscode自帶的
"vetur.format.defaultFormatter.js": "vscode-typescript",
// 移除js語句的分號(hào)
"javascript.format.semicolons": "remove",
// 在函數(shù)名后面加上括號(hào)凸舵，類似這種形式 foo () {}
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// 指定 *.vue 文件的格式化工具為vetur
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
// 指定 *.js 文件的格式化工具為vscode自帶
"[javascript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"vetur.format.defaultFormatterOptions": {
"JS-beautify-HTML": {
// JS-beautify-HTML的設(shè)置在這里
"wrap_attributes": "force-aligned"
},
"prettyhtml": {
"printWidth'": 100, // 每一行不超過100個(gè)字符
"singleQuote": false, // 不用單引號(hào)
"wrapAttributes": false,
"sortAttributes": true
},
"prettier": {
// 去掉代碼結(jié)尾的分號(hào)
"semi": false, //不加分號(hào)
"singleQuote": true, //用單引號(hào)
// #讓prettier使用eslint的代碼格式進(jìn)行校驗(yàn)
"eslintIntegration": true,
"arrowParens": "always"
}
}
}
基礎(chǔ)配置2
{
"workbench.colorTheme": "One Dark Pro",
// "editor.fontFamily": "Source Code Pro, 'Source Code Pro'",
"editor.fontSize": 14,
"editor.tabSize ": 4,
"workbench.editor.enablePreview": false,
"editor.wordWrap": "on",
"editor.quickSuggestions": {
"strings": true
},
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
{ "language": "vue", "autoFix": true }
],
"eslint.options": {
"plugins": ["vue"]
},
"eslint.autoFixOnSave": true,
"vetur.format.defaultFormatter.html": "none",
"vetur.format.defaultFormatter.js": "none"
}
常用插件安裝：
Chinese
--漢化
IntelliJ IDEA Keybindings
--使用webstorm快捷鍵
vue-helper
--vue函數(shù)跳轉(zhuǎn)必備
HTML Boilerplate
--生成html文件
Auto Close Tag
--自動(dòng)閉合HTML/XML標(biāo)簽
Auto Rename Tag
--自動(dòng)完成另一側(cè)標(biāo)簽的同步修改
Bracket Pair Colorizer
--括號(hào)不同顏色
HTML CSS Support (必備)
--智能提示CSS類名以及id
HTML Snippets
--智能提示HTML標(biāo)簽，以及標(biāo)簽含義
CSS Peek
--追蹤css類名和id定義位置
JavaScript(ES6) code snippets
--ES6語法智能提示
Debugger for Chrome
--映射vscode上的斷點(diǎn)到chrome上失尖，方便調(diào)試
調(diào)試方法：https://blog.csdn.net/example440982/article/details/79587704
ESLint
--js語法糾錯(cuò)
Prettier
--文檔格式化
GitLens(使用git的必備)
--方便查看git日志啊奄，git重度使用者必備
open in browser
--鼠標(biāo)右鍵快速在瀏覽器中打開html文件
Path Intellisense
--自動(dòng)提示文件路徑，支持各種快速引入文件
Vetur (vue必備)
--Vue多功能集成插件
React/Redux/react-router Snippets (react必備)
--React/Redux/react-router語法智能提示
git推薦清單：https://github.com/varHarrie/varharrie.github.io/issues/10
