VSCode前端常用插件

VSCode前端常⽤插件1.AutoCloseTag⾃动闭合HTML/XML标签2.AutoRenameTag⾃动完成另⼀侧标签的同步修改3.Beautify格式化代码，值得注意的是，beautify插件⽀持⾃定义格式化代码规则4.BracketPairColorizer给括号加上不同的颜⾊，便于区分不同的区块，使⽤者可以定义不同括号类型和不同颜⾊5.DebuggerforChrome映射vscode上的断点到chrome上，⽅便调试6.CourierNew⼀款好看字体7.GitLens⽅便查看git⽇志，git重度使⽤者必备8.HTMLCSSSupport智能提⽰CSS类名以及id9.HTMLSnippets智能提⽰HTML标签，以及标签含义10.JavaScript(ES6)codesnippetsES6语法智能提⽰，以及快速输⼊，不仅仅⽀持.js，还⽀持.ts，.jsx，.tsx，.html，.vue，省去了配置其⽀持各种包含js代码⽂件的时间11.jQueryCodeSnippetsjQuery代码智能提⽰12.MarkdownPreviewEnhanced实时预览markdown，markdown使⽤者必备13.markdownlintmarkdown语法纠错14.MaterialIconTheme个⼈认为最好的vscode图标主题，⽀持更换不同⾊系的图标，值得点出的是，该插件更新极其频繁，基本和vscode更新频率保持⼀致15.openinbrowservscode不像IDE⼀样能够直接在浏览器中打开html，⽽该插件⽀持快捷键与⿏标右键快速在浏览器中打开html⽂件，⽀持⾃定义打开指定的浏览器，包括：Firefox，Chrome，Opera，IE以及Safari16.PathIntellisense⾃动提⽰⽂件路径，⽀持各种快速引⼊⽂件17.React/Redux/react-routerSnippetsReact/Redux/react-router语法智能提⽰18.VeturVue多功能集成插件，包括：语法⾼亮，智能提⽰，emmet，错误提⽰，格式化，⾃动补全，debugger。vscode官⽅钦定Vue插件，Vue开发者必备。19.vscode-icon让vscode资源树⽬录加20.HTMLHinthtml代码检测21.ProjectManager在多个项⽬之前快速切换的⼯具22.fileheader顶部注释模板，可定义作者、时间等信息，并会⾃动更新最后修改时间，快捷键ctrl+alt+i在⽂件开头⾃动输⼊作者信息和修改信息等内容23.filesize在底部状态栏显⽰当前⽂件⼤⼩，点击后还可以看到详细创建、修改时间24.quokka⼀个调试⼯具插件，能够根据你正在编写的代码提供实时反馈。它易于配置，并能够预览变量的函数和计算值结果。另外，在使⽤JSX或TypeScript项⽬中，它能够开箱即⽤25.CSSPeek使⽤此插件，你可以追踪⾄样式表中CSS类和ids定义的地⽅。当你在HTML⽂件中右键单击选择器时，选择“GotoDefinition和Peekdefinition”选项，它便会给你发送样式设置的CSS代码。26.HTMLBoilerplate通过使⽤HTML模版插件，你就摆脱了为HTML新⽂件重新编写头部和正⽂标签的苦恼。你只需在空⽂件中输⼊html，并按Tab键，即可⽣成⼲净的⽂档结构。27.PrettierPrettier是⽬前Web开发中最受欢迎的代码格式化程序。安装了这个插件，它就能够⾃动应⽤Prettier，并将整个JS和CSS⽂档快速格式化为统⼀的代码样式。如果你还想使⽤ESLint，那么还有个Prettier–Eslint插件，你可不要错过咯！28.ColorInfo提供你在CSS中使⽤颜⾊的相关信息。你只需在颜⾊上悬停光标，就可以预览⾊块中⾊彩模型的（HEX、RGB、HSL和CMYK）相关信息了。29.IconFonts这是⼀个能够在项⽬中添加图标字体的插件。该插件⽀持超过20个热门的图标集，包括了FontAwesome、Ionicons、Glyphicons和MaterialDesignIcons30.Minify这是⼀款⽤于压缩合并JavaScript和CSS⽂件的应⽤程序。它提供了⼤量⾃定义的设置，以及⾃动压缩保存并导出为.min⽂件的选项。它能够分别通过uglify-js、clean-css和html-minifier，与JavaScript、CSS和HTML协同⼯作。使⽤F1运⾏⽂件缩⼩器Minify31.VueHelpersnippet代码⽚段32.Vue2Snippets33.VueVSCodeSnippetsVUE代码⾃动补全插件34.GitHistorygit提交历史35SettingSync同步你得设置和插件36.Reactjscodesnippets⼀个React⾃动补⼯具。37.vscode内置的命令⾏插件，也⽐较实⽤。38.npmIntellisense⽤于在import语句中⾃动填充npm模块。39.npm此扩展⽀持运⾏⽂件中定义的npm脚本，package.json并根据中定义的依赖项验证已安装的模块package.json。40.WindowColors每个VSCode窗⼝都可以独特地⾃动着⾊。41.liveserver插件开启本地服务器配置LiveServer{"liveServer.settings.port":8080,//设置本地服务的端⼝号"liveServer.settings.root":"/",//设置根⽬录，也就是打开的⽂件会在该⽬录下找"liveServer.settings.CustomBrowser":"chrome",//设置默认打开的浏览器"liveServer.settings.AdvanceCustomBrowserCmdLine":"chrome--incognito--remote-debugging-port=9222","liveServer.settings.NoBrowser":false,"liveServer.settings.ignoredFiles":[//设置忽略的⽂件".vscode/**","**/*.scss","**/*.sass"]}或者{"workbench.colorTheme":"DefaultLight+","editor.renderWhitespace":"all","editor.fontSize":18,"editor.fontFamily":"'CourierNew',Consolas,monospace","search.followSymlinks":false,"workbench.iconTheme":"vscode-icons","editor.suggestSelection":"first","vsintellicode.modify.editor.suggestSelection":"automaticallyOverrodeDefaultValue","liveServer.settings.NoBrowser":true,"liveServer.settings.CustomBrowser":"chrome","liveServer.settings.donotShowInfoMsg":true,"liveServer.settings.donotVerifyTags":true,"liveServer.settings.port":5500,}launch.json{"type":"chrome","request":"launch","name":"使⽤本机chrom调试","url":"http://l