专门针对前端开发者的VSCode插件介绍

专门针对前端开发者的VSCode插件介绍

本文主要介绍专门针对前端开发者的VSCode插件，包括语法高亮、代码检测、代码提示、代码格式化等功能。下面是介绍：

1. 语法高亮插件

VSCode自带前端代码语法高亮提示，但你可以安装主题来改变提示的颜色。如果想要更高水准的可读性，可以安装语法高亮的插件。以下是一些语法高亮插件：

• JavaScriptAtomGrammar：利用Atom编辑器里的JavaScript语法高亮替换VSCode原来的，惯用Atom者的福音。(Atom是一个文本编辑器)
• BabelJavaScript：支持React、ES201X、FlowType以及GraphQL的语法高亮。

2. 代码检测插件

编写前端JS代码时需要一个强力的代码检测(linter)工具。个人首推的是ESLint，这是最棒的VSCode代码检查插件。以下是一些代码检测插件：

• ESLint：这个插件把ESLint集成到VSCode中，它的规则在.eslintrc.json里配置。
• JSHint：基于JSHint的代码检测插件。在项目跟目录下使用.jshintrc文件作为其配置。
• JavaScriptStandardStyle：零配置和严格规则的代码检测，强制使用StandardJS规则。

3. 代码提示插件

这些插件可以大幅度提高写代码的速度，但不建议新手使用。以下是一些代码提示插件：

• HTMLCSSSupport：为CSS提供语法支持。增加了在attribute里的CSS代码感知等特性。
• VSCodeJavaScript(ES6)snippets：为HTML、JavaScript、React和Vue提供了ES6的语法支持哦。
• AtomJavaScriptSnippet：移植与Atom的JavaScript插件。

4. 代码格式化插件

有时候，别人的代码可读性很差，这个时候格式化插件就派上用场了。以下是一些代码格式化插件：

• Beatufy：一个jsBeautifier的插件，支持JavaScript、JSON、CSS和HTML。可通过.jsbeautifyrc文件自定义。
• PrettierCodeFormatter：利用Prettier的支持JavaScript、TypeScript和CSS的插件。
• JavaScriptBooster：一款了不起的代码重构工具。拥有需要代码操作，比如把var转为const或者let，去除多余的else语句，合并声明和初始化。

5. 浏览器插件

以下这些工具，安装一个就能极大地减少开发时的重复操作，不必每次都手动刷新浏览器：

• LiveServer：开启本地开发时服务器，为静态和动态页面提供实时刷新功能。
• DebuggerforChrome：在编辑器中打断点，让你轻松地在Chrome里调试JavaScript。
• PreviewonWebServer：提供web服务器和实时预览功能。

6. 框架类插件

以下是一些提供了强大功能的VSCode框架类插件：

• Angular6：提供Angular6的代码片段，支持TypeScript、HTML、AngularMaterialngRx、RxJS和FlexLayout。
• Angularv5snippets：提供针对TypeScript、RxJS、HTML和Docker文件的代码片段。
• ReactNative/React/Reduxsnippetsfores6/es7：提供对这些框架的ES6/ES7语法的代码片段。
• ReactNativeTools：为ReactNative框架提供代码智能提示、命令行工具和调试特性。
• Vetur：为Vue框架提供语法高亮、代码片段、Emmet、代码检测、智能提示和调试支持。
• CordavaTools：支持Cordava插件和Ionic框架，提供基于Cordova的项目的智能提示、调试已经其他特性的支持。
• jQueryCodeSnippets：提供了超过130个jQuery的代码片段，使用jq前缀来激活。

7. 超级实用插件

以下是一些超级实用的VSCode插件：

• Chinese(Simplified)LanguagePackforVisualStudioCode：这是我用VSCode安装的第一个插件。
• PasteasJSON：这个插件能快速地将JSON数据转为JavaScript代码。
• BracketPairColorizer：这个插件为你的括号添加匹配的颜色。
• AutoCloseTag：这个插件可以帮你闭合标签哦。