一.Material Icon Theme
这款主题叫做 Material Icon Theme，它采用了 Google Material Design 风格，文件图标以及文件夹图标覆盖非常的全面。
而且在暗黑模式下使用效果更佳。
image
各种图标：
image
二.Auto Close Tag
image.png
- 自动添加HTML/XML关闭标记，与Visual Studio IDE或升华文本相同
三.Auto Rename Tag
image.png
- 自动重命名成对的HTML/XML标记
四.Bracket Pair Colorizer
image.png
- 一个可定制的扩展，用于为匹配的括号着色
五.Chinese (Simplified) Language Pack for Visual Studio Code
image.png
- 汉化
六.Code Runner
image.png
- 在编译器中右键运行各种格式的文件
七.Code Spell Checker
image.png
- 源代码拼写检查器
八.Docker
image.png
- 容器管理
九.ES7 React/Redux/GraphQL/React-Native snippets
image.png
- 使用ES7语法在JS/TS中对React、Redux和Graphql进行简单扩展
十.ESLint
image.png
- 格式校验工具
十一.JavaScript (ES6) code snippets
image.png
- ES6语法代码提示
十二.open in browser
image.png
- 右键运行html文件
十三.Path Intellisense
image.png
- 文件路径补全工具
十四 .Prettier - Code formatter
image.png
- 代码格式化工具
十五.Vetur
image.png
- vue代码格式化工具
十六.Simple React Snippets
image.png
- react代码提示
十七.React Native Tools
image.png
- react代码调试工具
十八.koroFileHeader
image.png
- 在vscode中用于生成文件头部注释和函数注释的插件
十九.Vue 3 Snippets
image.png
- vue3 语法提示
二十.GitLens — Git supercharged
image.png
二十一.Git History
image.png
二十二.Live Server
二十三 . Volar
二十四 .Better Comments
image.png
setting.json文件,包含头部注释,保存自动格式化代码等
{
// "files.autoSave": "onFocusChange", //失去焦点自动保存
"files.autoSave": "off",
"json.format.enable": false,
"javascript.preferences.quoteStyle": "single",
"html.format.endWithNewline": true,
"explorer.confirmDelete": false,
"prettier.semi": false,
"prettier.singleQuote": true,
"typescript.updateImportsOnFileMove.enabled": "always",
"editor.fontLigatures": false,
"editor.formatOnSave": true,
"breadcrumbs.enabled": true,
"editor.renderControlCharacters": true,
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.fontSize": 16,
"window.zoomLevel": 1,
"editor.detectIndentation": false,
"editor.tabSize": 2,
"prettier.tabWidth": 2,
"prettier.printWidth": 120,
"fileheader.configObj": {
"createFileTime": true,
"language": {
"languagetest": {
"head": "/$$",
"middle": " $ @",
"end": " $/"
}
},
"autoAdd": true,
"autoAddLine": 100,
"autoAlready": true,
"annotationStr": {
"head": "/*",
"middle": " * @",
"end": " */",
"use": false
},
"headInsertLine": {
"php": 2,
"sh": 2
},
"beforeAnnotation": {
"文件后缀": "该文件后缀的头部注释之前添加某些内容"
},
"afterAnnotation": {
"文件后缀": "该文件后缀的头部注释之后添加某些内容"
},
"specialOptions": {
"特殊字段": "自定义比如LastEditTime/LastEditors"
},
"switch": {
"newlineAddAnnotation": true
},
"supportAutoLanguage": [],
"prohibitAutoAdd": ["json"],
"prohibitItemAutoAdd": ["项目的全称, 整个项目禁止自动添加头部注释, 可以使用快捷键添加"],
"moveCursor": true,
"dateFormat": "YYYY-MM-DD HH:mm:ss",
"atSymbol": ["@", "@"],
"atSymbolObj": {
"文件后缀": ["头部注释@符号", "函数注释@符号"]
},
"colon": [": ", ": "],
"colonObj": {
"文件后缀": ["头部注释冒号", "函数注释冒号"]
},
"filePathColon": "路径分隔符替换",
"showErrorMessage": false,
"writeLog": false,
"wideSame": false,
"wideNum": 13,
"functionWideNum": 0,
"CheckFileChange": false,
"createHeader": true,
"useWorker": false,
"designAddHead": false,
"headDesignName": "random",
"headDesign": false,
"cursorModeInternal": false
},
// 文件头部注释
"fileheader.customMade": {
"Description": "",
"Author": "xionglaifu",
"Date": "Do not edit",
"LastEditors": "xionglaifu",
"LastEditTime": "Do not Edit",
// "FilePath": "${file}",
"company": "formssi"
},
//函数注释
"fileheader.cursorMode": {
"name": "",
"test": "test font",
"msg": "",
"param": "",
"return": ""
},
"editor.minimap.maxColumn": 280,
"editor.quickSuggestions": null,
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"diffEditor.ignoreTrimWhitespace": false,
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"launch": {
"configurations": [],
"compounds": []
},
"open-in-browser.default": "Google Chrome",
// "eslint.validate": ["javascript", "javascriptreact", "vue", "typescript", "typescriptreact", "html"],
// "eslint.run": "onSave",
// "eslint.alwaysShowStatus": false,
// // #让函数(名)和后面的括号之间加个空格
// "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// // #让vue中的js按"prettier"格式进行格式化
"vetur.format.defaultFormatter.js": "vscode-typescript",
"git.confirmSync": false,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.format.enable": true,
// //行尾分号取消，使用单引号
// "vetur.format.defaultFormatterOptions": {
// "prettier": {
// "semi": false,
// "singleQuote": true
// }
// },
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[scss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"workbench.editorAssociations": {
"*.zip": "default"
},
"workbench.iconTheme": "material-icon-theme"
}