常用的一些vscode前端插件

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

记录一下常用的几个前端插件

1 Bracket Pair Colorizer

为代码中的括号 {[()]} 添上一抹亮色，这样找对应括号时会简单很多，可以使代码阅读更加方便。

2 Prettier-Code Formatter

格式化插件，这个可以一键格式化代码，非常香。
安装后需要进行格式化参数的配置：
VSCode左下角的设置图标–》设置–》输入框中搜索settings,随便点一个

/*  prettier的配置 */
    "prettier.printWidth": 100, // 超过最大值换行
    "prettier.tabWidth": 4, // 缩进字节数
    "prettier.useTabs": false, // 缩进不使用tab，使用空格
    "prettier.semi": true, // 句尾添加分号
    "prettier.singleQuote": true, // 使用单引号代替双引号
    "prettier.proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
    "prettier.arrowParens": "avoid", //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
    "prettier.bracketSpacing": true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
    "prettier.disableLanguages": ["vue"], // 不格式化vue文件，vue文件的格式化单独设置
    "prettier.endOfLine": "auto", // 结尾是 \n \r \n\r auto
    "prettier.eslintIntegration": false, //不让prettier使用eslint的代码格式进行校验
    "prettier.htmlWhitespaceSensitivity": "ignore",
    "prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
    "prettier.jsxBracketSameLine": false, // 在jsx中把'>' 是否单独放一行
    "prettier.jsxSingleQuote": false, // 在jsx中使用单引号代替双引号
    "prettier.parser": "babylon", // 格式化的解析器，默认是babylon
    "prettier.requireConfig": false, // Require a 'prettierconfig' to format prettier
    "prettier.stylelintIntegration": false, //不让prettier使用stylelint的代码格式进行校验
    "prettier.trailingComma": "es5", // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
    "prettier.tslintIntegration": false,
    "terminal.integrated.allowMnemonics": true,
    "terminal.integrated.automationShell.linux": "" // 不让prettier使用tslint的代码格式进行校验
///报错的话，检查一下有没有用逗号与上一项设置分隔

代码写完后使用alt+shift+f来一键格式化代码

3 Chinese (Simplified) Language Pack for Visual Studio Code

汉化vscode

4 CSS Peek

快速找到CSS定义
1.HTML文件，按住CTRL键同时移到鼠标到要查看样式的类上就可以看到该类的定义了。
按住 Ctrl键，鼠标放上去。会显示调用的CSS样式
2.跳转到样式的定义，按住CTRL键同时点击样式类的名称或者在类的名称上按F12键即可跳转到样式的定义。CSS Peek在开前端开发过程中节省了好多查找样式的时间

5 ES7 React/Redux/GraphQL/React-Native snippet

React-快速生成代码块
通过输入一些简写快速生产对应代码块
如 imr→ import React from ‘react’。习惯了之后还是很好用的

6 Auto Close Tag

自动补全结束标签

7 Auto Rename Tag

自动重命名结束标签

8 any-rule

正则插件，可以查找一些常用正则

9 ESLint

javascript代码检测工具，可以让你的代码写的更加规范

10 GitLens — Git supercharged

在vscode中使用git必备插件，功能非常强大

11 git graph

可以进行版本管理，比如pull、push、修改比较、log、merge

12 git history

右键弹出菜单可以选择看文件的log，这与分支的log是有区别的
还可以查看某一行的history

13 git blame

可以快速的查看某一行最近的一次修改是谁、什么时候、哪次提交修改的

14 Open-In-Browser

由于 VSCode 没有提供直接在浏览器中打开文件的内置界面，所以此插件在快捷菜单中添加了在默认浏览器查看文件选项，以及在客户端（Firefox，Chrome，IE）中打开命令面板选项。

15 HTML Boilerplate

通过使用 HTML模版插件，摆脱了为 HTML 新文件重新编写头部和正文标签的苦恼。只需在空文件中输入 html，并按 Tab 键，即可生成干净的文档结构。

16 HTML CSS Support

智能提示CSS类名以及id

17 HTML Snippets

智能提示HTML标签，以及标签含义

18 JavaScript(ES6) code snippets

ES6语法智能提示，以及快速输入，不仅仅支持.js，还支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各种包含js代码文件的时间

19 Npm Intellisense

自动补全引入node modules里面所安装的依赖。

20 Path intellisense

自动补全文件名。最常用的地方是，当去import其它文件的时候，能够对文件进行提示，快速补全要引入的文件名。

21 Markdown Preview Enhanced

实时预览markdown

22 Codelf

生成变量名

23 local history

可以记录历史代码

24 vscode-icons

使编辑界面更美观

25 change-case

快速修改当前选定内容或当前单词的命名

26 Markdown All in One

Markdown All in One这款插件可以实现媲美Typora的Markdown编辑体验

27 filesize

查看文件大小

28 Quokka

Quokka 是一个调试工具插件，能够根据你正在编写的代码提供实时反馈

29 SVG Viewer

此插件在 Visual Studio 代码中添加了许多实用的 SVG 程序，你无需离开编辑器，便可以打开 SVG 文件并查看它们

30 TabNine

TabNine 是一款基于人工智能的代码自动补全工具

31 Night Owl

一个惊艳的主题，写代码时动力十足

32 REST Client

REST Client 扩展工具允许你发送 HTTP 请求并直接在 VSCode 中查看响应。再也不需要使用外部应用程序向服务器发送 HTTP 请求。