Loading... ## 下载加速 1. 打开 Visual Studio Code 官网进行下载 2. 打开下载管理，复制下载链接 3. 将链接中的域名部分 az764295.vo.msecnd.net 替换为 vscode.cdn.azure.cn ```zsh 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][1] | PKief.material-icon-theme | 图标美化 | | [One Dark Pro][2] | zhuangtongfa.Material-theme | 暗黑风格主题 | | [background][3] | shalldie.background | 自定义背景图| ### HTML相关 | 插件名 | 插件 ID | 插件描述 | | --- | --- | --- | | [Auto Close Tag][4] | formulahendry.auto-close-tag | 自动添加 HTML / XML 关闭标签 | | [Auto Rename Tag][5] | formulahendry.auto-rename-tag | 自动重命名配对的 HTML / XML 标签 | [Highlight Matching Tag][6] | vincaslt.highlight-matching-tag Tag | 高亮匹配标记 | ### CSS相关 | 插件名 | 插件 ID | 插件描述 | | --- | --- | --- | | [Stylelint][7] | stylelint.vscode-stylelint | CSS / LESS / SCSS 代码检查 | | [Tailwind CSS IntelliSense][8] | bradlc.vscode-tailwindcss | Tailwind CSS 智能提示 | | [px to rem][9] | sainoba.px-to-rem px | 和 rem 互相转换 | ### 语法支持与代码格式检查 | 插件名 | 插件 ID | 插件描述 | | --- | --- | --- | | [ESLint][10] | dbaeumer.vscode-eslint | 将 ESLint 集成到 VSCode 中 | | [Prettier - Code formatter][11] | esbenp.prettier-vscode | 代码格式化 | | [Code Spell Checker][12] | streetsidesoftware.code-spell-checker| 代码拼写检查 | | [Error Lens][13] | usernamehw.errorlens | 突出显示代码错误和警告 | | [Vue 3 Snippets][14] | hollowtree.vue-snippets | 为 Vue2 和 Vue3 提供代码片段 | | [Vue Language Features (Volar)][15] | Vue.volar | Vue3 文件语法高亮、片段整理、错误检查、格式化 | | [TypeScript Vue Plugin (Volar)][16] | Vue.vscode-typescript-vue-plugin | 用于支持在 TS 中 import *.vue 文件 | | [Vetur][17] | octref.vetur | Vue2 文件语法高亮、片段整理、错误检查、格式化 | | [DotENV][18] | IronGeek.vscode-env | .env 文件键值字符串高亮和格式化 | | [Sort package.json][19] | psioniq.psi-header | 对 package.json 文件进行排序 | ### 开发体验提升 | 插件名 | 插件 ID | 插件描述 | | --- | --- | --- | | [GitLens — Git supercharged][20] | eamodio.gitlens | 增强构建在 VSCode 中的 Git 功能 | | [Live Server][21] | ritwickdey.LiveServer | 启动具有实时重新加载功能的本地开发服务 | | [Code Runner][22] | formulahendry.code-runner | 运行代码段或代码文件 | | [ES7 React/Redux/GraphQL/React-Native snippets][23] | dsznajder.es7react-js-snippets | 提供 ES7 中的 JavaScript 和 React / Redux 片段 | | [Pretty Typescript Errors][24] | yoavbls.pretty-ts-errors | 使 TypeScript 错误更美观、更易于阅读 | | [Auto Import][25] | steoates.autoimport | 自动查找，解析并提供所有可用导入的代码 | | [Import Cost][26] | wix.vscode-import-cost | 在编辑器中显示导入/需要包的大小 | | [Image preview][27] | kisstkondoros.vscode-gutter-preview | 在行号边上、悬停时显示图像预览 | | [Path Intellisense][28] | christian-kohler.path-intellisense | 自动补全文件路径 | | [npm Intellisense][29] | christian-kohler.npm-intellisense | 自动补全导入语句中的 npm 模块 | | [es6-string-html][30] | Tobermory.es6-string-html | ES6 模板字符串高亮 | | [Todo Tree][31] | Gruntfuggly.todo-tree | 在树视图中显示 TODO FIXME 等注释标记 | | [change-case][32] | wmaurer.change-case | 改变选中的文本的大小写 | ## 配置文件 ```json { // 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" ] } ``` [1]: https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme [2]: https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme [3]: https://marketplace.visualstudio.com/items?itemName=shalldie.background [4]: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag [5]: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag [6]: https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag [7]: https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint [8]: https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss [9]: https://marketplace.visualstudio.com/items?itemName=sainoba.px-to-rem [10]: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint [11]: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode [12]: https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker [13]: https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens [14]: https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets [15]: https://marketplace.visualstudio.com/items?itemName=Vue.volar [16]: https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin [17]: https://marketplace.visualstudio.com/items?itemName=octref.vetur [18]: https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv [19]: https://marketplace.visualstudio.com/items?itemName=psioniq.psi-header [20]: https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens [21]: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer [22]: https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner [23]: https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets [24]: https://marketplace.visualstudio.com/items?itemName=yoavbls.pretty-ts-errors [25]: https://marketplace.visualstudio.com/items?itemName=steoates.autoimport [26]: https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost [27]: https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview [28]: https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense [29]: https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense [30]: https://marketplace.visualstudio.com/items?itemName=Tobermory.es6-string-html [31]: https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree [32]: https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case 最后修改：2024 年 08 月 27 日 © 允许规范转载 赞 如果觉得我的文章对你有用，请随意赞赏