关于前端: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
性能：彩虹缩进

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

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

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

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

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

插件名：Live ServerPP
性能：在服务器端关上你的文件，实时显示你批改的代码
- 反对 websocket 音讯服务，能够用于调试 websocket 客户端
- 反对可编程虚构文件，可用于模仿服务端 API 接口

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

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

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

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

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

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

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

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

Bookmarks
- 性能：罕用于读源码进行标记行，跳转（代码标记疾速跳转）
ESLint
- 性能：代码标准查看
Prettier - Code formatter
- 性能：代码丑化，主动格式化成标准格局
Project Manager
- 性能：项目管理插件，当开发多个我的项目时，能够疾速跳转
Path Intellisense
- 性能：门路智能提醒
Image preview
- 性能：当引入门路为图片时，能够预览以后图片
GitLens
- 性能：加强了 git 性能，反对在 VSCode 查看作者、批改工夫等等
open in browser
- 性能：在浏览器关上以后文件

插件名：vue-component
性能：输出组件名称主动导入找到的组件，主动导入门路和组件
- 选中后主动输出组件名（蕴含必填属性）、import 语句、components 属性

插件名：Vetur
开发 Vue 必备

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

插件名：React Style Helper
性能：在 React 中更疾速地编写内联款式，并对 CSS、LESS、SASS 等款式文件提供弱小的辅助开发性能
- 主动补全
- 跳转至款式和变量定义地位
- 创立 JSX/TSX 的行内款式
- 预览款式及变量内容

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

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

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

插件名：vscode-styled-components

插件名：One Dark Pro

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

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

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

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

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

插件名：A-super-translate
应用办法：选中行，Ctrl+Shift+p 输出翻译
- 键入 ctrl+` 再按下 ctrl+1 为翻译间接替换选中区域
性能：翻译辨认代码中正文局部，不烦扰浏览。反对不同语言，单行、多行正文、
- 反对用户字符串与变量翻译, 反对驼峰拆分

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

2021 VSCode 前端插件举荐

前言

开发综合举荐

别名门路跳转

配置阐明

成果展现

门路别名智能提醒

装置成果和性能

indent-rainbow

Bracket Pair Colorizer 2

Auto Rename Tag

Code Spell Checker

Code Runner

Debugger for Chrome

Live ServerPP

Svg Preview

Tabnine

Template String Converter

vscode-pigments

Parameter Hints

Quokka.js

Highlight Matching Tag

公众类插件

插件

Vue 开发举荐

vue-component

Vetur

Vue 3 Snippets

React 开发举荐

React Style Helper

ES7 Reactsnippets

vscode-styled-components

主题类

Dracula Official

One Dark Pro

vscode-icons

其余举荐

CSS Initial Value

画板作图

Echars 智能提醒插件

翻译插件

总结（附全副插件图片）