Visual Studio Code 配置
文章目录

下载加速
- 打开 Visual Studio Code 官网进行下载
- 打开下载管理,复制下载链接
- 将链接中的域名部分 az764295.vo.msecnd.net 替换为 vscode.cdn.azure.cn
https://az764295.vo.msecnd.net/stable/abd2f3db4bdb28f9e95536dfa84d8479f1eb312d/VSCode-darwin-universal.zip
# 替换成这样
https://vscode.cdn.azure.cn/stable/abd2f3db4bdb28f9e95536dfa84d8479f1eb312d/VSCode-darwin-universal.zip扩展推荐
点击插件 或在扩展商店搜索插件 ID 即可安装
主题推荐
| 插件名 | 插件ID | 插件描述 |
|---|---|---|
| Material Icon Theme | PKief.material-icon-theme | 图标美化 |
| One Dark Pro | zhuangtongfa.Material-theme | 暗黑风格主题 |
| background | shalldie.background | 自定义背景图 |
HTML相关
| 插件名 | 插件 ID | 插件描述 |
|---|---|---|
| Auto Close Tag | formulahendry.auto-close-tag | 自动添加 HTML / XML 关闭标签 |
| Auto Rename Tag | formulahendry.auto-rename-tag | 自动重命名配对的 HTML / XML 标签 |
| Highlight Matching Tag | vincaslt.highlight-matching-tag Tag | 高亮匹配标记 |
CSS相关
| 插件名 | 插件 ID | 插件描述 |
|---|---|---|
| Stylelint | stylelint.vscode-stylelint | CSS / LESS / SCSS 代码检查 |
| Tailwind CSS IntelliSense | bradlc.vscode-tailwindcss | Tailwind CSS 智能提示 |
| px to rem | sainoba.px-to-rem px | 和 rem 互相转换 |
语法支持与代码格式检查
| 插件名 | 插件 ID | 插件描述 |
|---|---|---|
| ESLint | dbaeumer.vscode-eslint | 将 ESLint 集成到 VSCode 中 |
| Prettier - Code formatter | esbenp.prettier-vscode | 代码格式化 |
| Code Spell Checker | streetsidesoftware.code-spell-checker | 代码拼写检查 |
| Error Lens | usernamehw.errorlens | 突出显示代码错误和警告 |
| Vue 3 Snippets | hollowtree.vue-snippets | 为 Vue2 和 Vue3 提供代码片段 |
| Vue Language Features (Volar) | Vue.volar | Vue3 文件语法高亮、片段整理、错误检查、格式化 |
| TypeScript Vue Plugin (Volar) | Vue.vscode-typescript-vue-plugin | 用于支持在 TS 中 import *.vue 文件 |
| Vetur | octref.vetur | Vue2 文件语法高亮、片段整理、错误检查、格式化 |
| DotENV | IronGeek.vscode-env | .env 文件键值字符串高亮和格式化 |
| Sort package.json | psioniq.psi-header | 对 package.json 文件进行排序 |
开发体验提升
| 插件名 | 插件 ID | 插件描述 |
|---|---|---|
| GitLens — Git supercharged | eamodio.gitlens | 增强构建在 VSCode 中的 Git 功能 |
| Live Server | ritwickdey.LiveServer | 启动具有实时重新加载功能的本地开发服务 |
| Code Runner | formulahendry.code-runner | 运行代码段或代码文件 |
| ES7 React/Redux/GraphQL/React-Native snippets | dsznajder.es7react-js-snippets | 提供 ES7 中的 JavaScript 和 React / Redux 片段 |
| Pretty Typescript Errors | yoavbls.pretty-ts-errors | 使 TypeScript 错误更美观、更易于阅读 |
| Auto Import | steoates.autoimport | 自动查找,解析并提供所有可用导入的代码 |
| Import Cost | wix.vscode-import-cost | 在编辑器中显示导入/需要包的大小 |
| Image preview | kisstkondoros.vscode-gutter-preview | 在行号边上、悬停时显示图像预览 |
| Path Intellisense | christian-kohler.path-intellisense | 自动补全文件路径 |
| npm Intellisense | christian-kohler.npm-intellisense | 自动补全导入语句中的 npm 模块 |
| es6-string-html | Tobermory.es6-string-html | ES6 模板字符串高亮 |
| Todo Tree | Gruntfuggly.todo-tree | 在树视图中显示 TODO FIXME 等注释标记 |
| change-case | wmaurer.change-case | 改变选中的文本的大小写 |
配置文件
{
// Theme Sitting
"workbench.colorTheme": "One Dark Pro Darker",
"workbench.iconTheme": "material-icon-theme",
"material-icon-theme.opacity": 0.75,
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"name": "italic font",
"scope": [
"comment",
"keyword",
"storage",
"keyword.control",
"keyword.control.from",
"keyword.control.flow",
"keyword.operator.new",
"keyword.control.import",
"keyword.control.export",
"keyword.control.default",
"keyword.control.trycatch",
"keyword.control.conditional",
"storage.type",
"storage.type.class",
"storage.modifier.tsx",
"storage.type.function",
"storage.modifier.async",
"variable.language",
"variable.language.this",
"variable.language.super",
"meta.class",
"meta.var.expr",
"constant.language.null",
"support.type.primitive",
"entity.name.method.js",
"entity.other.attribute-name",
"punctuation.definition.comment",
"text.html.basic entity.other.attribute-name",
"tag.decorator.js entity.name.tag.js",
"tag.decorator.js punctuation.definition.tag.js",
"source.js constant.other.object.key.js string.unquoted.label.js"
],
"settings": {
"fontStyle": "italic"
}
}
]
},
// background icon
"background.enabled": true,
// auto close tag
"auto-close-tag.enableAutoCloseTag": true,
"auto-close-tag.enableAutoCloseSelfClosingTag": true,
// auto rename tag
"auto-rename-tag.activationOnLanguage": [
"*"
],
// styleLint 禁用内置 CSS、Less 和 SCSS linter
"css.validate": false,
"less.validate": false,
"scss.validate": false,
"editor.codeActionsOnSave": {
"source.fixAll": "explicit"
},
// tailwind Css
"files.associations": {
"*.cjson": "jsonc",
"*.wxss": "css",
"*.wxs": "javascript",
"*.vue": "vue",
"*.env.*": "env"
},
"editor.quickSuggestions": {
"strings": "on"
},
// px to rem
"px-to-rem.px-per-rem": 16,
// prettier
"editor.defaultFormatter": "esbenp.prettier-vscode",
// 是否每行末尾添加分号
"prettier.semi": false,
// 是否使用单引号
"prettier.singleQuote": true,
"prettier.printWidth": 100,
"prettier.trailingComma": "none",
// spell checker ignore
"cSpell.userWords": [
"applescript",
"autohotkey",
"autoit",
"cscript",
"esbenp",
"escript",
"gfortran",
"haxe",
"javac",
"kitc",
"lein",
"lessc",
"Linebreak",
"Nologo",
"osascript",
"Rscript",
"runghc",
"rustc",
"sbcl",
"scriptcs",
"spwn",
"tailwindcss",
"trycatch",
"vbscript",
"Vite"
],
"editor.unicodeHighlight.nonBasicASCII": false,
// code runner
"code-runner.executorMap": {
"javascript": "node",
"java": "cd $dir && javac $fileName && java $fileNameWithoutExt",
"c": "cd $dir && gcc $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
"zig": "zig run",
"cpp": "cd $dir && g++ $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
"objective-c": "cd $dir && gcc -framework Cocoa $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
"php": "php",
"python": "python -u",
"perl": "perl",
"perl6": "perl6",
"ruby": "ruby",
"go": "go run",
"lua": "lua",
"groovy": "groovy",
"powershell": "powershell -ExecutionPolicy ByPass -File",
"bat": "cmd /c",
"shellscript": "bash",
"fsharp": "fsi",
"csharp": "scriptcs",
"vbscript": "cscript //Nologo",
"typescript": "ts-node",
"coffeescript": "coffee",
"scala": "scala",
"swift": "swift",
"julia": "julia",
"crystal": "crystal",
"ocaml": "ocaml",
"r": "Rscript",
"applescript": "osascript",
"clojure": "lein exec",
"haxe": "haxe --cwd $dirWithoutTrailingSlash --run $fileNameWithoutExt",
"rust": "cd $dir && rustc $fileName && $dir$fileNameWithoutExt",
"racket": "racket",
"scheme": "csi -script",
"ahk": "autohotkey",
"autoit": "autoit3",
"dart": "dart",
"pascal": "cd $dir && fpc $fileName && $dir$fileNameWithoutExt",
"d": "cd $dir && dmd $fileName && $dir$fileNameWithoutExt",
"haskell": "runghc",
"nim": "nim compile --verbosity:0 --hints:off --run",
"lisp": "sbcl --script",
"kit": "kitc --run",
"v": "v run",
"sass": "sass --style expanded",
"scss": "scss --style expanded",
"less": "cd $dir && lessc $fileName $fileNameWithoutExt.css",
"FortranFreeForm": "cd $dir && gfortran $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
"fortran-modern": "cd $dir && gfortran $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
"fortran_fixed-form": "cd $dir && gfortran $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
"fortran": "cd $dir && gfortran $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
"sml": "cd $dir && sml $fileName",
"mojo": "mojo run",
"erlang": "escript",
"spwn": "spwn build",
"pkl": "cd $dir && pkl eval -f yaml $fileName -o $fileNameWithoutExt.yaml",
"gleam": "gleam run -m $fileNameWithoutExt"
},
"npm-intellisense.importES6": true,
"npm-intellisense.importQuotes": "'",
"npm-intellisense.importLinebreak": ";\r\n",
"npm-intellisense.importDeclarationType": "const",
/********** 编辑器相关 **********/
"editor.fontSize": 14,
"editor.tabSize": 2,
"editor.minimap.enabled": true,
"editor.formatOnSave": true,
"editor.unicodeHighlight.allowedLocales": {
"zh-hans": true
},
/** 文件配置 */
"files.eol": "\n",
"files.exclude": {
"**/.idea": true
},
"files.insertFinalNewline": true,
"files.simpleDialog.enable": true,
/** git 相关 */
"git.ignoreMissingGitWarning": true,
"git.autofetch": true,
"git.untrackedChanges": "separate",
/** eslint 配置 */
"eslint.format.enable": true,
"eslint.options": {
"extensions": [
".js",
".jsx",
".ts",
".tsx",
".vue"
]
},
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"html",
"vue",
"markdown",
"json",
"jsonc",
"json5"
],
/** errorLens 配置 */
"errorLens.enabledDiagnosticLevels": [
"warning",
"error"
],
"errorLens.excludeBySource": [
"cSpell",
"Grammarly",
"eslint"
]
}本文标题:Visual Studio Code 配置
本文链接:https://blog.luola.me/27.html
除非另有说明,本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议。
声明:转载请注明文章来源。