1.VScode
1.1必备插件
1.2备忘插件
在平时的使用过程中，先在需要标记的地方写上 TODO:
1.记得一定是大写的TODO，并且是英文状态下的冒号。
2.当写完之后，TODO:会以高亮的方式显示。非常方便用于以后的查找。
备忘
1.3转换成rem单位
px2rem
1.4.1颜色缩进
Indent Rainbow
1.5vsCode主题
https://jingyan.baidu.com/article/64d05a02f54f80de54f73b76.html
1.5.1引入包大小
Import Cost
1.6控制台
ctrl + `
1.7ESLint
新版
https://blog.csdn.net/qq_25186543/article/details/103818996
位置
https://blog.csdn.net/zzqq12345/article/details/106736622/
按照eslint标准
https://blog.csdn.net/z591826160/article/details/86556830
{
// vscode默认启用了根据文件类型自动设置tabsize的选项
"editor.detectIndentation": false,
// 重新设定tabsize
"editor.tabSize": 2,
// #每次保存的时候自动格式化
"editor.formatOnSave": true,
// #让函数(名)和后面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// // #这个按用户自身习惯选择
"vetur.format.defaultFormatter.html": "js-beautify-html",
// #让vue中的js按编辑器自带的ts格式进行格式化
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned",
// #vue组件中html代码格式化样式
},
},
"editor.codeActionsOnSave": {
// #每次保存的时候将代码按eslint格式进行修复
"source.fixAll.eslint": true,
"eslint.autoFixOnSave": true,
},
"eslint.codeAction.showDocumentation": {
"enable": true
},
"window.zoomLevel": 1,
"workbench.colorTheme": "Monokai"
}
2.setting.json
{
// vscode默认启用了根据文件类型自动设置tabsize的选项
"editor.detectIndentation": false,
// 重新设定tabsize
"editor.tabSize": 4,
// #每次保存的时候将代码按eslint格式进行修复
"eslint.options": {
"extensions": [
".js",
".vue"
]
},
// "eslint.workingDirectories": [
// "./这里填写你的子目录名称"
// ],
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
},
// "eslint.format.enable": true,
"editor.formatOnSave": false,
//autoFix默认开启，只需输入字符串数组即可
"eslint.validate": ["javascript", "vue", "html"],
// 导航栏字体大小
"window.zoomLevel": 1.2,
"editor.fontSize": 18,
"files.associations": {
"*.vue": "vue",
},
// #让函数(名)和后面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// "vetur.format.defaultFormatterOptions": {
// "js-beautify-html": {
// "wrap_attributes": "force-aligned"
// // #vue组件中html代码格式化样式
// }
// },
// tab颜色
"indentRainbow.colors": [
"rgba(255,255,64,0.07)",
"rgba(127,255,127,0.07)",
"rgba(255,127,255,0.07)",
"rgba(79,236,236,0.07)"
],
"editor.suggest.snippetsPreventQuickSuggestions": false,
"editor.colorDecorators": true,
"eslint.codeAction.disableRuleComment": {
},
"eslint.alwaysShowStatus": true,
"eslint.debug": true,
"[vue]": {
// "editor.defaultFormatter": "yoyo930021.vuter"
},
"vetur.format.defaultFormatter.js": "none",
"vetur.completion.scaffoldSnippetSources": {
},
"vetur.format.options.useTabs": true,
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "auto"
},
"prettier": {
"singleQuote": true,
"semi": true,
"tabWidth": 4
},
"prettyhtml": {
"singleQuote": false,
"wrapAttributes": false,
"sortAttributes": false
}
},
"px-to-rem.number-of-decimals-digits": 2,
"px-to-rem.px-per-rem": 12,
"workbench.iconTheme": "vscode-icons",
"eslint.codeAction.showDocumentation": {
},
"eslint.nodePath": "",
}
3.插件位置
4.离线插件安装
5.文件夹右键VSCode
7.background背景
https://blog.csdn.net/yukinoai/article/details/84564949
https://blog.csdn.net/zhouhangzhouxing/article/details/89814592
8.火花
9.Pigment
颜色实时展示
10.Settings Sync
同步个人设置
11.一键安插件
在项目的 .vscode 目录下创建文件 extensions.json
{
recommendations: [
'oderwat.indent-rainbow',
'alefragnani.project-manager',
'dbaeumer.vscode-eslint'
]
}
