前端vsCode常用插件推荐并留档

首先基础的插件安装：方便代码书写、阅读及美观

// 适用于 VS Code 的中文（简体）语言包
Chinese (Simplified) Language Pack for Visual Studio Code

// VSCode 注释翻译
Comment Translate

// 自动关闭标签
Auto Close Tag

// 自动重命名标签
Auto Rename Tag

// 美化代码
Beautify

// 美化代码
Prettier - Code formatter

// 智能路径
Path Intellisense

//  文件图标
vscode-icons

//  es规范扩展
ESLint

其次根据自己所用框架进行安装：react

// react 代码片段
ES7 React/Redux/GraphQL/React-Native snippets

其次根据自己所用框架进行安装：vue

// vue
Vue Language Features (Volar)

最后非开发必须的插件：给人眼前一亮的感觉

//  多种自定义注释颜色
Better Comments

//  在vscode 进行浏览器预览
Browser Preview

//  文件函数预设注释模板
koroFileHeader

//  提供更多的代码实现方式推荐和问题推荐修复
JavaScript Booster

//  截图更美观
Polacode-2020

// 正则工具
any-rule

// SVG图片预览
SVG

//  支架对着色器（官方已内置，无需再安装）
Bracket Pair Colorizer

把自己的vsCode配置sttings.json贴出来-留档

{
  "editor.fontSize": 16, //字体大小
  "editor.tabSize": 2, //换行空格数
  "editor.lineHeight": 24, //行高
  "editor.wordWrap": "on", //自动换行
  "editor.minimap.enabled": true, //是否显示缩略图
  "editor.formatOnSave": true, //保存时格式代码
  "editor.multiCursorModifier": "ctrlCmd", //按住Ctrl打开链接
  "editor.mouseWheelZoom": false, // 通过使用鼠标滚轮同时按住 Ctrl 可缩放编辑器的字体

  "workbench.sideBar.location": "right", //控制栏的位置
  "workbench.iconTheme": "vscode-icons", //文件图标
  "workbench.statusBar.visible": true, //控制台底部是否可见
  "workbench.activityBar.visible": true, //控制台活动栏是否可见

  "javascript.format.insertSpaceBeforeFunctionParenthesis": true, //  让函数(名)和后面的括号之间加个空格

  "prettier.semi": true, //  去掉代码结尾的分号
  "prettier.singleQuote": true, //  使用单引号替代双引号

  "emmet.showSuggestionsAsSnippets": true,
  "typescript.updateImportsOnFileMove.enabled": "always",// 始终自动更新路径
}

注：我的配置大部分保留插件默认的，具体配置根据自己需求进行配置 ,期待相互学习