vscode 前端最佳插件配置 |
您所在的位置：网站首页 › 阅读器有啥作用 › vscode 前端最佳插件配置 |
vscode 前端最佳插件配置
|
vscode最佳配置
最近更新时间： 2023.02.18 （Vscode v1.17） vscode 配置文件内容在最后，可直接copy使用 配置详解editor是针对 vscode 的风格设置 例如 tabSize：一个tab等于2个空格，行高为24px workbench是针对 vscode 的主题设置 例如 iconTheme（ 图标风格）：使用插件 vscode-great-icons （需搜索安装） search.exclude 配置vscode中项目中的哪些地方被排除搜索,避免你每次搜索结果中都有一大堆无关内容 files.associations 配置文件关联 : 任何 vue 后缀的文件会被认为是 html 文件 ，(查看编辑器右下角) 然后 vscode 会用 html 规则匹配 vue 文件做相应格式化，代码提示等。 任何 wxss 后缀的文件被认为是 css 文件 ，然后 vscode 会用 css 规则匹配 wxss 文件，对 css 的属性排序，rem 自动转换，格式化等 "files.associations": { "*.vue": "html", "*.wxss": "css" }收藏文章/复制粘贴最好。会持续更新 apicloud 是用于同步 vscode 开发apicloud程序时进行手机wifi真机同步使用，不用数据线即可进行PC修改代码，真机调试。 vetur 和prettier以及stylus是用于vue开发时的代码格式化, 代码提示. filesize在底部状态栏左侧，显示当前文件大小，没啥用 Live Server快速启动本地服务器，注意只对.html和.htm文件有效。对html文件点击鼠标右键，选择open with Live Server. 屏幕阅读器优化, 可选项. 此功能是 vscode 专门配合盲人阅读器而做的贴心选项，对于程序员来说也有一定作用( 哈哈哈, 可以纠正中式英文发音) 例如：当你开启后，鼠标悬浮在桌面任何位置，语音朗读器都会朗读出来所在位置的内容。一旦在vscode中开启，那么底部会显示如图所示。具体设置在文尾。 水桶套装！直接安装全部插件，插件互不干扰。 vscode插件列表中, Ctrl + 鼠标左键 + 点击标题 会弹出对应官方介绍 前端 HTML CSS Support 在html/css文件中快速书写属性 【 Supported Languages】JavaScript (ES6) code snippets 快速书写ES6代码 【Supported languages】cssrem 将css中的px自动转换为rem.再也不用计算器（大漠推介） 【局部】Css Peek 在html和css文件中定位class和id样式. （右键单击选择器时，选择 Go to Definition和 Peek definition，遗憾的是vue中不可用）【html/css文件】npm Intellisense 在import语句中，自动填充npm模块。【js文件】Prettier 格式化，全世界都在使用Prettier来统一风格 【局部】Eslint Js 语法检测 【全局】Tslint Typescript 语法检测 【ts，js文件】JSON to TS 将json代码转变为Ts代码 【全局】Vetur 快速书写 Vue2 代码 【vue文件】Vue 2 Snippets 快速新建一个 Vue2 页面（参考文章） 【全局】Volar 快速书写 Vue3（对于Vue3不必安装前面2个插件） 代码 【vue文件】Sass CSS预处理器，scss后缀文件的识别扩展 【vue文件】language-stylus CSS预处理器，styl后缀文件的识别扩展 【styl文件】language-postcss PostCSS预处理器**【styl文件】**python Python tab与空格的痛苦，写过python的都知道 【py文件】Flutter Flutter Flutter ! YYDS! 【dart文件】Awesome Flutter Snippets Flutter 代码片段速写 【dart文件】Built Value Snippets 配合 Built Value 快速生成 dart 模型 【dart文件】其他 Comment Translate 自动将英文翻译为中文 【全局】View In Browser 迅速通过浏览器打开html文件 【局部】filesize 在底部状态栏左侧，显示当前文件大小，还可以点击 【全局】Better Comments 对注释内容着色。快捷使用： 编辑器内输入 /**, 再按Tab键 【全局】REST Client 类似 postman ，直接在 VScode 中模拟发送http请求，调试可用 【全局】Live Server 快速启动一个本地服务器 【全局】以下插件为：可选以及不推介安装。 以下插件 要么会导致VS体验变差，要么会导致快捷键冲突，如果没有相关需求，不再建议安装。 Sublime Text Keymap 启用sublimeText的快捷键配置 (sublimeText的老用户学着去适应Vscode的快捷键吧)Visual Studio IntelliCode 支持 AI for Python,Ts/Js /Java 语法。(此插件主要用于AI开发，因此支持Node，安装之后，在Js代码书写中会给出代码提示。不进行AI开发的人员，无需安装)Bracket Pair Colorizer2 每一对括号不同颜色 （太受欢迎，vscode已内置此功能）VS Code ES7 React/Redux/React-Native/JS snippets 快速书写React(非react项目，禁用) 【js文件】React Native Tools 支持React Native项目，快速书写 es6 及 jsx (非react项目，禁用)【js文件】C/C++ 运行React Native项目时，查看某些文件的需要这个 【全局】 { // VScode主题配置 "editor.tabSize": 2, "editor.lineHeight": 24, "editor.renderLineHighlight": "none", "editor.renderWhitespace": "none", "editor.fontFamily": "Consolas", "editor.fontSize": 15, "editor.cursorBlinking": "smooth", "editor.multiCursorModifier": "ctrlCmd", "editor.wordWrap": "off", // 永不换行 "editor.wordWrapColumn": 400, "editor.linkedEditing": true, "editor.bracketPairColorization.enabled": true, "explorer.confirmDelete": false, "workbench.startupEditor": "newUntitledFile", "workbench.iconTheme": "material-icon-theme", "workbench.colorTheme": "Dracula Soft", "workbench.colorCustomizations": { "editorIndentGuide.activeBackground": "#ff0000" // 设置guide线高亮颜色,可以改为自己喜欢的颜色 }, "workbench.editor.limit.enabled": true, // 是否限制每一个VSCODE窗体内显示的编辑器窗体数量（默认为关闭）。 "workbench.editor.limit.perEditorGroup": true, // 是对打开的所有VSCODE窗体进行限制还是只对当前VSCODE窗体限制 "workbench.editor.limit.value": 8, // 打开的编辑器的最大数量（默认为10，超出数量会自动关闭） // 代码提示显示位置，控制自定义代码片段所处位置。许多插件都有snippet代码提示功能，top表示自定义片段会优先显示在最上方 "editor.snippetSuggestions": "top", // 代码提示默认选中项。 // coding时，VScode会给出很多提示，在所有的提示选项中会默认选中一个，这一配置就是表示默认选中哪一项。 // 此项配置十分精妙，自己改改探索一下。 // 可选值如下： // "editor.snippetSuggestions": "first" VScode将总是选中第一项 // "editor.snippetSuggestions": "recentlyUsed" （默认值）vscode将从代码提示中，预先选中最近使用过的项 // "editor.snippetSuggestions": "recentlyUsedByPrefix" （推介）vscode将从所有可用片段中，预先选中最近使用过的项 "editor.suggestSelection": "recentlyUsedByPrefix", "editor.quickSuggestions": { // 是否显示可能用到的示例代码.安装插件过多，建议选项也会非常多 "other": true, "comments": true, "strings": false }, "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue", // 配置 vscode 默认打开外部终端为 Cmder. 注意本机如果没安装第三方终端，那么无需配置此项 "terminal.external.windowsExec": "D:\\Asoftware\\cmder\\Cmder.exe", // 配置 vscode 内部集成 Cmder 终端 "terminal.integrated.defaultProfile.windows": "Command Prompt", "terminal.integrated.profiles.windows": { "PowerShell": { "source": "PowerShell", "icon": "terminal-powershell" }, "Command Prompt": { "path": [ "${env:windir}\\Sysnative\\cmd.exe", "${env:windir}\\System32\\cmd.exe" ], "args": ["/k D:\\Asoftware\\cmder\\vendor\\init.bat"], "icon": "terminal-cmd" }, "Git Bash": { "source": "Git Bash" } }, // 移动文件或者修改文件名时，是否自动更新引用了此文件的所有文件 "javascript.updateImportsOnFileMove.enabled": "always", "[json]": { // 对json文件，使用 vscode内置JSON语言功能 进行格式化 "editor.defaultFormatter": "vscode.json-language-features" }, "[html]": { // 对html文件，使用 vscode内置html语言功能 进行格式化.(安装prettier后，prettier就会更改此项。我选择不使用 prettier) "editor.defaultFormatter": "vscode.html-language-features" }, "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[less]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[scss]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[vue]": { // 可选值： eslint ："dbaeumer.vscode-eslint" vetur: "octref.vetur" prettier: "esbenp.prettier-vscode" "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[markdown]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[typescript]": { // 对ts文件进行格式化时，使用哪一种风格 (此处使用的是vscode中安装的ts插件默认风格进行格式化) "editor.defaultFormatter": "vscode.typescript-language-features" }, "breadcrumbs.enabled": true, // 启用顶部面包屑导航（可直接跳转文件） "open-in-browser.default": "chrome", // 配置打开html文件的默认浏览器 "search.exclude": { // VScode进行文件搜索时，不搜索这些区域。 "**/node_modules": true, "**/bower_components": true, "**/*.code-search": true, "**/.DS_Store": true, "**/.git": true, "**/.gitignore": true, "**/.idea": true, "**/.svn": true, "**/.vscode": true, "**/build": true, "**/dist": true, "**/tmp": true, "**/yarn.lock": true, "**/assets": true, "**/.history": true, "vite.config.ts.timestamp-*": true, "**/pnpm-lock.yaml": true }, // 配置是否在左侧目录列表中显示该文件/文件夹 "files.exclude": { "**/.git": true, "**/.svn": true, "**/.hg": true, "**/CVS": true, "**/.DS_Store": true, "**/*.g.dart": true }, // 配置文件关联 "files.associations": { // 比如小程序中的 .wxss 这种文件，会把它作为css文件来处理，以便相关插件提供对应的css的语法提示，css的格式化等。 "*.wxss": "css", "*.cjson": "jsonc", "*.wxs": "javascript", "*.ts": "typescript", "*.vue": "vue", "*.dart": "dart", "*.json": "jsonc", ".prettierrc": "jsonc" }, // 配置emmet是否启用tab展开缩写 // vscode已经内置emmet,这一设置最大作用是：当输入的文本不属于Emmet定义的缩写规则时，依然允许使用Tab键进行扩展。此时会提示自定义的缩写语句，以及各插件自定义的缩写语句. "emmet.triggerExpansionOnTab": true, "emmet.showSuggestionsAsSnippets": true, // 是否将自定义的代码片段作为提示建议显示。 "emmet.syntaxProfiles": { // 配置emmet支持哪些类型的文件 "vue-html": "html", "vue": "html", "javascript": "javascriptreact", "xml": { "attr_quotes": "double" } }, "emmet.includeLanguages": { "wxml": "html", "vue-html": "html", "javascript": "javascriptreact", "jsx-sublime-babel-tags": "javascriptreact" // 在 react 的jsx中添加对emmet的支持 }, // =========格式化文件======= // 粘贴后的内容, 是否对此粘贴内容进行格式化 "editor.formatOnPaste": false, /// if => 关闭编辑器自带保存格式化功能，此功能会用Vetur进行格式化 "editor.formatOnSave": true, "editor.codeActionsOnSave": { // 自动对 import 这种符合CommonJS规范语句进行排序， // 要使此功能生效，要求使用到星号的语句写在当前文件顶部，例如：import * as Some from "R" "source.organizeImport": true, // 自动引入缺少的库 "source.addMissingImports": true, /// else => "source.fixAll": true // 对所有文件，保存时自动格式化 // "source.fixAll.eslint": false, // 更细. 在文件保存时，eslint规则生效。此配置会影响 eslint.format.enable // "source.fixAll.tslint": false, // 更细. 在文件保存时，tslint规则生效。 此配置会影响 typescript.validate.enable // "source.fixAll.stylelint": false // 更细. 在文件保存时，stylelint样式规则生效 }, "eslint.options": { // 统一配置所有项目的eslint规则 ,修改为你自己项目文件位置，或者直接删除 // "configFile": "D:/worksapce/vue-project/.eslintrc.js", }, // eslint规则对以下几种类型文件生效 "eslint.validate": [ "javascript", "javascriptreact", "html", "typescript", "typescriptreact", "vue" ], // 是否开启 tslint代码规范检测 (与eslint 开启一种即可) "typescript.validate.enable": false, "git.autofetch": true, // 在push代码时，是否先自动从远端拉取代码 "git.enableSmartCommit": true, "gitlens.advanced.messages": { // 配置gitlen中git提交历史记录的信息显示情况 "suppressCommitHasNoPreviousCommitWarning": false, "suppressCommitNotFoundWarning": false, "suppressFileNotUnderSourceControlWarning": false, "suppressGitVersionWarning": false, "suppressLineUncommittedWarning": false, "suppressNoRepositoryWarning": false }, // css2rem插件: 书写css时，px单位自动提示是否转换为rem单位 // 此处根字体大小设置为100（默认为16）, 注意与你项目中rem数值保持一致 "cssrem.rootFontSize": 100, // 多行注释合并 "commentTranslate.multiLineMerge": true, // 注释采用简洁模式 "commentTranslate.hover.concise": true, // VScode更新后，是否显示版本changeLog "versionlens.suggestions.showPrereleasesOnStartup": true, "liveServer.settings.donotShowInfoMsg": true, // 解决Vue换行问题 "vetur.ignoreProjectWarning": true, "vetur.format.defaultFormatter.html": "js-beautify-html", "vetur.format.defaultFormatter.js": "vscode-typescript", "vetur.format.defaultFormatterOptions": { "js-beautify-html": { "wrap_attributes": "auto" }, "prettyhtml": { "printWidth": 100, "singleQuote": false, "wrapAttributes": false, "sortAttributes": false }, }, "security.workspace.trust.untrustedFiles": "open", "debug.openDebug": "openOnDebugBreak", // 断点调试时，遇到断点，自动显示调试视图。（全局，不可为每种语言单独配置） /// **python开发专用配置** "python.linting.enabled": false, // 是否格式化python文件 "minapp-vscode.disableAutoConfig": true, // 微信小程序是否自动配置 /// **apicloud开发专用配置** 。 "apicloud.port": "23450", // 设置apicloud在vscode中的wifi真机同步时的端口 "apicloud.subdirectories": "/apicloudproject", // 设置apicloud在vscode中的wifi真机同步根目录，默认可不设置 /// **dart语言专用配置** "dart.checkForSdkUpdates": false, "dart.warnWhenEditingFilesOutsideWorkspace": true, "dart.openDevTools": "flutter", "dart.enableCompletionCommitCharacters": true, "dart.lineLength": 120, "dart.previewFlutterUiGuides": true, "dart.debugSdkLibraries": true, "dart.debugExternalPackageLibraries": true, "[dart]": { // 保存文件时，是否自动格式化代码， "editor.formatOnSave": true, // 当你输入特定字符时，是否自动格式化代码，(比如输入 `;` 和 `}`). "editor.formatOnType": true, // 在120个字符处画一条引导线，这个范围内的dart代码将被格式化。 "editor.rulers": [120], // 禁用与所选内容匹配的单词的内置突出显示。如果不这样做，所选文本的所有实例都将突出显示，从而影响Dart突出显示所选变量的精确引用的能力。 "editor.selectionHighlight": false, // 默认情况下，当处于“代码片段模式”（在插入的代码中编辑占位符）时，VS会防止snippets弹出打开。 // 如果设置为“false”，则表示允许完成操作打开，就像不在代码段占位符中 "editor.suggest.snippetsPreventQuickSuggestions": true, "editor.suggestSelection": "recentlyUsedByPrefix", // 允许使用按速写代码片段，例如，输入“for”时，即使完成列表不可见。 "editor.tabCompletion": "onlySnippets", // 默认情况下，当前的语言没有代码片段提示时，VS Code将使用当前文件中的你自己写过的单词来显示代码片段提示。 // 这导致代码完成在编辑注释和字符串时建议单词。 此设置将阻止这种情况 // 对于dart来说最好关闭，对于html和css建议开启 "editor.wordBasedSuggestions": false, // 在文件底部添加新代码行时，强制所有文件都有一行空格。 "files.insertFinalNewline": true }, /// **java语言专用配置** // 由于我本机java版本为 Java1.8 , vscode内置的vscode-java依赖于openJDK 并且要求版本大于等于 11，所以总是会弹出一个报错窗口。 // https://github.com/redhat-developer/vscode-java/wiki/JDK-Requirements#java.configuration.runtimes，解决办法如下 // 1. 下载 openJDK11 并安装，下载地址：https://adoptopenjdk.net/ // 2. 配置 java.jdt.ls.java.home 为刚刚安装的 openJDK11 的位置 // 3. 由于我只希望在Vcode中使用JDK11版本，在实际项目中的配置不变，所以配置 java.configuration.runtimes "java.jdt.ls.java.home": "C:/Program Files/JavaAdoptOpenJDK/jdk-11.0.8.10-hotspot", "java.configuration.runtimes": [ { "name": "JavaSE-1.8", "path": "C:/Program Files/Java/jdk1.8.0_211" }, { "name": "JavaSE-11", "path": "C:/Program Files/JavaAdoptOpenJDK/jdk-11.0.8.10-hotspot", "default": true } ] } 常用快捷键 终端启动快捷键: ctrl + shift + C格式化快捷键: shirt + alt + F （使用 shirt + alt + F 进行格式化时，先执行编辑器设置中的格式化规则，然后执行本地项目 eslint 和 tslint 等插件规则）自动删除代码中无用的 import 引用,并排序: shift + alt + o自动修复代码: alt+Q (比如Vue3自动引入 ref 等对象。需要自定义：文件 – 首选项 – 键盘快捷方式 – 输入快速修复) 其他功能 1. Screen Reader（屏幕阅读器）支持windows7以上操作系统，不支持mac，作为练习英语听力的小玩具. 首先下载并安装软件，Nvda, 需要的pass: he2m 安装完成此软件后启动。在vscode中配置项editor.quickSuggestions决定是否开启. 2. vue 项目，antfu 代码规范vscode中，使用 eslint 和 prettier 格式化(无缝衔接setting.json配置) vscode中，Vue3自动自动导入失败时，出现Ts Error(全局安装Typescript 4.8.3) { /// **Vue.js专用配置** "javascript.preferences.autoImportFileExcludePatterns": [ "@vue/runtime-core", "@vue/runtime-dom" ], "typescript.preferences.autoImportFileExcludePatterns": [ "@vue/runtime-core", "@vue/runtime-dom" ] } 3. react 项目配置react项目（使用 npx create-react-app my-app 创建），有时会发现eslint检验规则不生效，此时在当前项目，需要额外安装2个插件。 npm install --save-dev eslint-plugin-html eslint-plugin-react 4. 插件快捷键冲突插件安装过多时，不可避免会出现快捷键冲突。为了解决冲突，需要打开快捷键清单，根据插件名称搜索对应插件快捷键，比如我输入: emmet, 对准任意一条快捷键选项，点击鼠标右键，选择显示相同的按键绑定,修改为自己喜欢的快捷键即可。（建议仅对冲突的进行更改）文件 --> 首选项 --> 键盘快捷方式 5.vscode国内镜像快速下载地址 vscode配置历史版本------ 如果文章对你有用，感谢右上角 >>>点赞 | 收藏 |
【本文地址】
今日新闻 |
推荐新闻 |