Web前端入门第 17 问：前端开发编辑器及插件推荐
<p>HELLO，这里是大熊学习前端开发的入门笔记。</p><p>本系列笔记基于 windows 系统。</p>
<hr>
<p>虽然说 Web 前端开发用记事本也能玩，但正常的开发者绝不用记事本玩（大佬除外）。</p>
<p>想想要用记事本扣一个淘宝、京东，那场景可真是美呆了。</p>
<p>一个好的编辑器，绝对可以事半功倍的。</p>
<h2 id="编辑器可以提供哪些功能">编辑器可以提供哪些功能</h2>
<ol>
<li>
<p>语法高亮：<br>
编辑器能够根据编程语言自动高亮显示关键字、变量、函数等，使代码更易读。</p>
</li>
<li>
<p>自动补全：<br>
提供智能代码补全功能，包括变量名、函数名、库成员等，减少手动输入错误。</p>
</li>
<li>
<p>错误提示：<br>
提供错误提示功能，在代码中显示错误和警告信息，帮助开发者快速定位问题。</p>
</li>
<li>
<p>代码导航：<br>
支持快速跳转到定义、声明、引用等位置，通过点击符号或快捷键实现。</p>
</li>
<li>
<p>自动格式化：<br>
提供自动格式化功能，自动对齐代码、缩进、换行等，提高代码可读性。</p>
</li>
</ol>
<p>其他功能：调试功能，版本控制集成，多语言支持，插件和扩展，性能优化，用户界面友好，跨平台支持，云同步和协作，集成终端。</p>
<h2 id="前端常见编辑器">前端常见编辑器</h2>
<ul>
<li>VSCode （免费）：有强大的插件生态系统，智能代码补全和Git集成，广泛的社区支持和文档资源。</li>
<li>WebStorm （付费）：强大的JavaScript IDE，针对前端开发和Node.js开发优化，智能代码补全和提示，内置强大的调试功能，对Git等版本控制工具集成良好。</li>
<li>Cursor （付费）：一款基于 VSCode 二次开发的 AI 代码编辑器，支持配置使用其他AI，并可以同时使用多个模型，可以理解为在 VSCode 中集成了 AI 辅助编程助手。</li>
<li>Atom （免费）：可定制性强，支持丰富的插件和主题，实时预览功能，适合网页开发。</li>
<li>Sublime Text （付费）：轻量快速，界面简洁，拥有丰富的插件生态系统，支持多光标编辑和多重选择，提高编码效率。</li>
</ul>
<p>推荐 VSCode ，主打一个开源、免费、插件多，下载地址：https://code.visualstudio.com/。</p>
<h2 id="可能会用到的-vscode-插件">可能会用到的 VSCode 插件</h2>
<p>插件安装：点击侧边栏的<code>扩展</code>菜单或者快捷键<code>Ctrl + Shift + X</code>，搜索想安装的插件，然后点击<code>Install/安装</code>，部分插件安装完成后需要重启。</p>
<ol>
<li>
<p>Better Comments<br>
更友好的注释插件。</p>
</li>
<li>
<p>Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code<br>
VSCode 的中文语言包。</p>
</li>
<li>
<p>Code Spell Checker<br>
英语拼写检查插件，如：出现单词写错了会给提示。</p>
</li>
<li>
<p>名称: Color Highlight<br>
颜色高亮显示插件。</p>
</li>
<li>
<p>名称: CSS Peek<br>
快速找到定义的 css 样式插件。</p>
</li>
<li>
<p>Error Lens<br>
错误信息直接显示在本行代码后面。</p>
</li>
<li>
<p>ESLint<br>
代码格式化检测插件。</p>
</li>
<li>
<p>GitLens<br>
显示本行代码 git 提交记录。</p>
</li>
<li>
<p>Highlight Matching Tag<br>
标签高亮显示插件。</p>
</li>
<li>
<p>HTML CSS Support<br>
提供 HTML 和 CSS 的语法高亮、代码提示和自动补全等功能。</p>
</li>
<li>
<p>Image preview<br>
图片预览插件。</p>
</li>
<li>
<p>Import Cost<br>
显示引入的三方包大小。</p>
</li>
<li>
<p>indent-rainbow<br>
更友好的缩进插件。</p>
</li>
<li>
<p>IntelliSense for CSS class names in HTML<br>
给 HTML 添加 CSS 类名自动补全功能。</p>
</li>
<li>
<p>Prettier - Code formatter<br>
代码格式化插件。</p>
</li>
<li>
<p>Project Manager<br>
项目管理插件。</p>
</li>
<li>
<p>Thunder Client<br>
VSCode 发起 http 请求。</p>
</li>
<li>
<p>Todo Tree<br>
记录待办列表。</p>
</li>
<li>
<p>Turbo Console Log<br>
快捷键生成 console.log() 代码。</p>
</li>
<li>
<p>vscode-icons<br>
显示文件图标。</p>
</li>
<li>
<p>Vue - Official<br>
Vue 官方插件。</p>
</li>
</ol>
<p>偶尔访问一下 VSCode 插件市场，看看下载量超高的插件，总会获得一些小惊喜。</p>
<h2 id="总结">总结</h2>
<p>VSCode 配上插件，可以算是如虎添翼，从利器变为神器，分分钟从文本编辑器变身为一个完整的开发工具。</p>
</div>
<div id="MySignature" role="contentinfo">
<p> </p>
<p style="font-size: 18px;font-weight: bold;">文章首发于微信公众号【<span style="color:rgb(255, 71, 87)">前端路引</span>】，欢迎 <span style="color:#4ec259">微信扫一扫</span> 查看更多文章。</p>
<p>
<img style="max-width: 320px;" src="https://images.cnblogs.com/cnblogs_com/linx/2447020/o_250228035031_%E5%85%AC%E4%BC%97%E5%8F%B7%E4%BA%8C%E7%BB%B4%E7%A0%81.png"/>
</p>
<p>本文来自博客园，作者：前端路引，转载请注明原文链接：https://www.cnblogs.com/linx/p/18754309</p>
<p> </p><br><br>
来源：https://www.cnblogs.com/linx/p/18754309
頁:
[1]