2021 VSCode 前端插件举荐

前言

举荐一波前端开发必备插件，相对能够进步你的生产力，剩下来的工夫来 mo 鱼，岂不美哉

开发综合举荐

别名门路跳转

插件名：别名门路跳转

应用阐明: 别名门路跳转插件，反对任何我的项目，

应用场景: 当你在开发页面时, 想点击 别名门路导入的组件时（演示如下）

配置阐明

• 下载后只需自定义配置一些本人罕用的别名门路即可

  • 右击插件 –》扩大设置 –》门路映射在 settinas.json 中编辑

  // 文件名别名跳转
    "alias-skip.mappings": {
      "~@/": "/src",
      "views": "/src/views",
      "assets": "/src/assets",
      "network": "/src/network",
      "common": "/src/common"
    },

成果展现

门路别名智能提醒

• 插件名：path-alias
• 场景: 在导入组件的时候，应用 别名门路没用提醒时👇 (可和别名门路跳转同时应用, 无抵触)
• 具体应用教程(贼简略)

装置成果和性能

indent-rainbow

• 插件名: indent-rainbow
• 性能：彩虹缩进

Bracket Pair Colorizer 2

• 插件名: Bracket Pair Colorizer 2
• 性能：给匹配的括号() 或者 对象{}.. 增加对应的色彩用于辨别

Auto Rename Tag

• 插件名: Auto Rename Tag
• 性能：主动重命名标签

Code Spell Checker

• 插件名：Code Spell Checker
• 性能：查看单词拼写是否谬误（反对英语）

Code Runner

• 插件名：Code Runner
• 性能：一键执行各种语言代码（罕用于测试）

Debugger for Chrome

• 插件名：Debugger for Chrome
• 性能：在 VSCode 端，调试代码

Live ServerPP

• 插件名：Live ServerPP

• 性能：在服务器端关上你的文件，实时显示你批改的代码

  • 反对 websocket 音讯服务，能够用于调试 websocket 客户端
  • 反对可编程虚构文件，可用于模仿服务端 API 接口

Svg Preview

• 插件名：Svg Preview
• 性能：能够显示你的 SVG 图片，还能够编辑

Tabnine

• 插件名：Tabnine
• 性能：智能提醒代码，能够预测你将要写的代码进行提醒

Template String Converter

• 插件名：Template String Converter
• 性能：在字符串中输出 $ 触发，将字符串转换为模板字符串

vscode-pigments

• 插件名：vscode-pigments
• 性能：实时预览设置的色彩

Parameter Hints

• 插件名：Parameter Hints
• 性能：提醒函数的参数类型及音讯

Quokka.js

• 插件名：Quokka.js
• 应用：装置插件后，ctrl+shift+p输出 Quokka new JavaScr.. 即可应用
• 性能：实时显示打印输出，更多功能自行摸索（罕用于测试）

Highlight Matching Tag

• 插件名：Highlight Matching Tag
• 性能：当光标停留在标签时，高亮匹配的标签

公众类插件

• 根本都有装置就不具体介绍了

插件

• Bookmarks

  • 性能：罕用于读源码进行标记行，跳转（代码标记疾速跳转）

• ESLint

  • 性能：代码标准查看

• Prettier - Code formatter

  • 性能：代码丑化，主动格式化成标准格局

• Project Manager

  • 性能：项目管理插件，当开发多个我的项目时，能够疾速跳转

• Path Intellisense

  • 性能：门路智能提醒

• Image preview

  • 性能：当引入门路为图片时，能够预览以后图片

• GitLens

  • 性能：加强了 git 性能，反对在 VSCode 查看作者、批改工夫等等

• open in browser

  • 性能：在浏览器关上以后文件

Vue 开发举荐

vue-component

• 插件名：vue-component

• 性能：输出组件名称主动导入找到的组件，主动导入门路和组件

  • 选中后主动输出组件名（蕴含必填属性）、import 语句、components 属性

Vetur

• 插件名：Vetur
• 开发 Vue 必备

Vue 3 Snippets

• 插件名：Vue 3 Snippets
• 根本必备：很多 Vue 的代码段，很不便开发

React 开发举荐

React Style Helper

• 插件名：React Style Helper

• 性能：在 React 中更疾速地编写内联款式，并对 CSS、LESS、SASS 等款式文件提供弱小的辅助开发性能

  • 主动补全
  • 跳转至款式和变量定义地位
  • 创立 JSX/TSX 的行内款式
  • 预览款式及变量内容

• 行内款式主动补全，同时反对 SASS 变量的跳转及预览。

ES7 Reactsnippets

• 插件名：ES7 React/Redux/React-Native/JS snippets
• 性能：很多 React 的代码段，很不便开发

vscode-styled-components

• 插件名：vscode-styled-components
• 性能：在 JS 文件中写款式时，有智能提醒

主题类

Dracula Official

• 插件名：vscode-styled-components

One Dark Pro

• 插件名：One Dark Pro

vscode-icons

• 插件名：vscode-icons
• VSCode文件夹 & 文件图标

其余举荐

• 以下插件，可能不罕用，大家感兴趣能够试试😉

CSS Initial Value

• 插件名：vscode-icons
• 性能：显示每个 CSS 属性的初始值，当光标停留在 css 属性时

画板作图

• 插件名：Draw.io Integration
• 性能：在 VSCode 中画图，反对多人合作编辑图表..

Echars 智能提醒插件

• 插件名：echarts-vscode-extension
• 应用：装置插件后，ctrl+shift+p输出 active Echars 即可开启智能提醒
• 性能：提醒各种Echar 中 Option 的属性，挺弱小的

翻译插件

• 插件名：A-super-translate

• 应用办法：选中行，Ctrl+Shift+p 输出 翻译

  • 键入 ctrl+` 再按下 ctrl+1 为翻译间接替换选中区域

• 性能：翻译辨认代码中正文局部，不烦扰浏览。反对不同语言，单行、多行正文、

  • 反对用户字符串与变量翻译, 反对驼峰拆分

总结（附全副插件图片）

• 依据需要，大家装置对应插件即可（装置太多插件，VSCode 会很卡）
• 当然电脑配置足够弱小，当我没说🤔