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修改代码,真机调试

veturprettier以及stylus是用于vue开发时的代码格式化, 代码提示.

filesize在底部状态栏左侧,显示当前文件大小,没啥用

Live Server快速启动本地服务器,注意只对.html和.htm文件有效。对html文件点击鼠标右键,选择open with Live Server.


屏幕阅读器优化, 可选项. 此功能是 vscode 专门配合盲人阅读器而做的贴心选项,对于程序员来说也有一定作用( 哈哈哈, 可以纠正中式英文发音)
例如:当你开启后,鼠标悬浮在桌面任何位置,语音朗读器都会朗读出来所在位置的内容。一旦在vscode中开启,那么底部会显示如图所示。具体设置在文尾。
在这里插入图片描述

vscode插件安装

  • Dracula Official 主题(我的最爱)
  • Material Icon Theme 图标主题
  • Chinese Language Pack 中文语言包
  • GitLens 在代码文件显示每一行的提交历史
  • Git History 对比查看git历史版本
  • indent-rainbow 凸显缩进着色,让你的缩进一目了然
  • Tabnine AI – AI 代码完成插件 【全局】
  • Code Runner F5, 运行! 【全局】
  • Image preview 图片预览 【全局】
  • Color Highlight 颜色高亮 【全局】
  • Regex Previewer 边写正则边看结果 【全局】
  • Markdown Preview Enhanced Markdown文件预览 【md文件】
  • Markdown All in One Markdown全功能snippet 【md文件】
  • koroFileHeader 生成文件头部备注 【md文件】
  • XML Tools XML文件格式化以及高亮 【xml文件】
  • DotENV env文件高亮 【xml文件】
  • Bookmarks 对代码片段添加书签,便于跳转 【全局】
  • Path Intellisense 路径识别,书写文件引入地址时很方便。遗憾: 对webpack项目中的路径别名无法识别 【全局】
  • Prettier 格式化,全世界都在使用Prettier来统一风格【局部】**

水桶套装!直接安装全部插件,插件互不干扰。

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",
    // 允许使用按<tab>速写代码片段,例如,输入“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配置)

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国内镜像快速下载地址


—— 如果文章对你有用,感谢右上角 >>>点赞 | 收藏 <<<

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/39234.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注