前端开发推荐vscode安装什么插件？
<h1 id="前端开发推荐vscode安装什么插件">前端开发推荐vscode安装什么插件？</h1><h2 id="1html-snippetsvisual-studio-code-html-snippets"><strong>1，HTML snippets(Visual Studio Code HTML snippets)</strong><img src="https://pica.zhimg.com/50/v2-bb299adfd2bbbb01cf6bef22e39a502c_720w.jpg?source=1940ef5c"><img src="https://pic2.zhimg.com/v2-bb299adfd2bbbb01cf6bef22e39a502c_r.jpg?source=1940ef5c"></h2>
<p>这是一款前端开发者必备的扩展，它能将你从手动键入每个标签中解放出来。只需输入 div 然后按下回车，一对标签就出现了。更厉害的是，对于需要嵌套的标签，你可以直接用 ul>li>a 的格式表示，按下回车后就能看到你需要的嵌套。还有一点，这个扩展已经包括所有的 HMTL5 片段。</p>
<h2 id="2javascript-es6-code-snippets">*2，JavaScript (ES6) code snippets**<img src="https://pic2.zhimg.com/50/v2-0ae07e22da68d654b3149bedd3e638c3_720w.jpg?source=1940ef5c"><img src="https://pic2.zhimg.com/v2-0ae07e22da68d654b3149bedd3e638c3_r.jpg?source=1940ef5c"></h2>
<p>在上面一段中你可能就已经注意到，代码片段很有用，它能够有效减少拼写错误和提高编码效率。几乎每个前端程序员都是 JavaScript 的使用者，为了提高编写 JS 代码的效率，这个扩展很有用，并且它还支持 .ts, .tsx 和 .jsx 文件。扩展中有很多快捷缩写，比如想要调用 export default class ClassName{}，输入 ecl 按下空格即可。</p>
<h2 id="3css-peek"><strong>3，CSS Peek</strong></h2>
<p><img src="https://pic1.zhimg.com/50/v2-2e820dc05eba6b1cb11c20466c8a6e52_720w.jpg?source=1940ef5c"></p>
<p><img src="https://pic2.zhimg.com/v2-2e820dc05eba6b1cb11c20466c8a6e52_r.jpg?source=1940ef5c"></p>
<p>既然已经分别介绍了 HTML 和 JS 的助手，我们也不能落下 CSS。CSS Peek 是一个支持 .html 和 .js 文件的扩展，它能帮助开发者快速找到和查看选定类或 id 所用的样式。对于那些不喜欢来回切换文件或者分屏的开发者来说这个扩展很有用。</p>
<h2 id="4angularreactvue"><strong>4，Angular/React/Vue</strong></h2>
<p><img src="https://pic3.zhimg.com/50/v2-723284e9365549bac1c139e0f25d25b4_720w.jpg?source=1940ef5c"><img src="https://pic2.zhimg.com/v2-723284e9365549bac1c139e0f25d25b4_r.jpg?source=1940ef5c"></p>
<p>既然提到了代码片段，我们最好也提一下每个框架下的不同扩展。对 AngularJS 来说，Angular Snippets(Version 8)是针对 AngularJS 8 的一款扩展，它为我们提供 Typescript 和 HTML 的代码片段。对于 React.js 框架，ES7 React/Redux/GraphQL/React-Native snippets 是一个优秀的扩展，它使用 ES7 提供 React 和 Redux 的代码片段，用法和 Javascript snippets 类似，都是按空格键。<br>
<img src="https://pic2.zhimg.com/50/v2-41f4c5bf7d711bf8ec457da245434a4d_720w.jpg?source=1940ef5c"><img src="https://pic2.zhimg.com/v2-41f4c5bf7d711bf8ec457da245434a4d_r.jpg?source=1940ef5c"><br>
对 Vue.js 开发，有一个叫 Vetur 的扩展相当棒，它目前的下载量已经有将近2,000万。Vetur 的功能很强大，包括代码片段，Emmet，错误检查，格式化，调试和高亮语法等</p>
<p>。<img src="https://pic1.zhimg.com/50/v2-38f3434385c367e748ff3e3eb5ebc771_720w.jpg?source=1940ef5c"><img src="https://pica.zhimg.com/v2-38f3434385c367e748ff3e3eb5ebc771_r.jpg?source=1940ef5c"></p>
<h2 id="5eslint"><strong>5，ESLint</strong></h2>
<p><img src="https://pic2.zhimg.com/50/v2-70da0a6d5118ce0136f3aa84b0e48f39_720w.jpg?source=1940ef5c"><img src="https://pic4.zhimg.com/v2-70da0a6d5118ce0136f3aa84b0e48f39_r.jpg?source=1940ef5c"><br>
如果你想要写出友好，易读，干净的代码，我建议你在 VSC 中安装一个 ESLint 扩展，它会帮助你持续养成好的编码习惯，比如缩进等。</p>
<h2 id="6prettier-代码格式工具"><strong>6，Prettier 代码格式工具</strong></h2>
<p><img src="https://pic1.zhimg.com/50/v2-0c747e9ccebf46bb926f193acc71c1f6_720w.jpg?source=1940ef5c"><img src="https://pic2.zhimg.com/v2-0c747e9ccebf46bb926f193acc71c1f6_r.jpg?source=1940ef5c"><br>
说到漂亮整洁的代码，Prettier 听名字你就值得拥有。尤其在项目需要你和其他同事合作完成时，Prettier 会强势地将代码格式全部统一，让你再也不用和同事讨论自己的代码。</p>
<h2 id="7gitlens"><strong>7，GitLens</strong></h2>
<p><img src="https://pic2.zhimg.com/50/v2-90f412e5c1b6535b263c9c2934784c67_720w.jpg?source=1940ef5c"><img src="https://pic1.zhimg.com/v2-90f412e5c1b6535b263c9c2934784c67_r.jpg?source=1940ef5c"><br>
我在文章开头就提到过，VSC 是整合了 git 功能的，通过安装 GitLens 这个功能将会更强大，它能让你看到每一行代码是由谁在什么时候写的，并且快速查看代码提交详情，在团队协作中这个扩展很有用。</p>
<h2 id="8auto-import-自动导入包"><strong>8，Auto import 自动导入包</strong></h2>
<p><img src="https://pic2.zhimg.com/50/v2-0a9820836f4aa9289c8e603aa91de8fb_720w.jpg?source=1940ef5c"><img src="https://pic2.zhimg.com/v2-0a9820836f4aa9289c8e603aa91de8fb_r.jpg?source=1940ef5c"><br>
Auto import 是一个自动导入包扩展。如果目前手头的项目是基于不同组件的，那么你需要做的就是给每个组件命名，剩下的事交给 Auto import 就好。</p>
<h2 id="9path-autocomplete-路径自动补全"><strong>9，Path autocomplete 路径自动补全</strong></h2>
<p><img src="https://pic2.zhimg.com/50/v2-ef9815e7c05b13be783e9e006d2bb3d6_720w.jpg?source=1940ef5c"><img src="https://pic3.zhimg.com/v2-ef9815e7c05b13be783e9e006d2bb3d6_r.jpg?source=1940ef5c"><br>
提到了导入的问题，另一个重要的扩展就是能够智能补全导入文件路径的 Path autocomplete。使用时，输入 ./ 后你就会看到一个包含所有文件名的下拉菜单。当文件目录繁杂时，这个扩展真的是很好用，它为你省去了很多一层一层刨开目录的痛苦。</p>
<h2 id="10bracket-pair-colorizer-括号着色器"><strong>10，Bracket Pair Colorizer 括号着色器</strong></h2>
<p><img src="https://pica.zhimg.com/50/v2-dd8aa26980f2a257db1a7c935f6b2626_720w.jpg?source=1940ef5c"><img src="https://pic1.zhimg.com/v2-dd8aa26980f2a257db1a7c935f6b2626_r.jpg?source=1940ef5c"><br>
括号着色器能让我们一眼看出当前代码块的反括号在哪里。有时候在稍微复杂的函数中，找到正确的那对代码并不是那么容易，但 Bracket Pair Colorizer 在你键入一个括号时就为这一对括号分配了自己的颜色，便于阅读。</p>
<h2 id="11indenticator-缩进指示器"><strong>11，Indenticator 缩进指示器</strong></h2>
<p><img src="https://pic1.zhimg.com/50/v2-8cf155314dbc570ad1cda631454186fe_720w.jpg?source=1940ef5c"><img src="https://pic1.zhimg.com/v2-8cf155314dbc570ad1cda631454186fe_r.jpg?source=1940ef5c"><br>
Indenticator 可以高亮显示出当前缩进的深度，深度由线和点表示，同样使代码更整洁，提高代码易读性。</p>
<h2 id="12debugger-for-chrome-调试器"><strong>12，Debugger for Chrome 调试器</strong></h2>
<p><img src="https://pic3.zhimg.com/50/v2-ffe44203014245fd20f976902b2025d3_720w.jpg?source=1940ef5c"><img src="https://pic2.zhimg.com/v2-ffe44203014245fd20f976902b2025d3_r.jpg?source=1940ef5c"><br>
放在最后的是重磅级的调试扩展 Debugger for Chrome。这个插件能让你在 VSC 里面直接调试 JS 文件，效果和 Chrome 的控制台中差不多，让你不用打开浏览器就直接打断点。最后注明出处：[适合前端开发人员的vscode扩展插件推荐-三人行慕课u.com/people/otstar-25)</p><br><br>
来源：https://www.cnblogs.com/Xieyingpeng/p/15139228.html
頁:
[1]