Web前端入门第 17 问：前端开发编辑器及插件推荐

HELLO，这里是大熊学习前端开发的入门笔记。

本系列笔记基于 windows 系统。

---

虽然说 Web 前端开发用记事本也能玩，但正常的开发者绝不用记事本玩（大佬除外）。

想想要用记事本扣一个淘宝、京东，那场景可真是美呆了。

一个好的编辑器，绝对可以事半功倍的。

编辑器可以提供哪些功能

1. 语法高亮：
   编辑器能够根据编程语言自动高亮显示关键字、变量、函数等，使代码更易读。

2. 自动补全：
   提供智能代码补全功能，包括变量名、函数名、库成员等，减少手动输入错误。

3. 错误提示：
   提供错误提示功能，在代码中显示错误和警告信息，帮助开发者快速定位问题。

4. 代码导航：
   支持快速跳转到定义、声明、引用等位置，通过点击符号或快捷键实现。

5. 自动格式化：
   提供自动格式化功能，自动对齐代码、缩进、换行等，提高代码可读性。

其他功能：调试功能，版本控制集成，多语言支持，插件和扩展，性能优化，用户界面友好，跨平台支持，云同步和协作，集成终端。

前端常见编辑器

• VSCode （免费）：有强大的插件生态系统，智能代码补全和Git集成，广泛的社区支持和文档资源。
• WebStorm （付费）：强大的JavaScript IDE，针对前端开发和Node.js开发优化，智能代码补全和提示，内置强大的调试功能，对Git等版本控制工具集成良好。
• Cursor （付费）：一款基于 VSCode 二次开发的 AI 代码编辑器，支持配置使用其他AI，并可以同时使用多个模型，可以理解为在 VSCode 中集成了 AI 辅助编程助手。
• Atom （免费）：可定制性强，支持丰富的插件和主题，实时预览功能，适合网页开发。
• Sublime Text （付费）：轻量快速，界面简洁，拥有丰富的插件生态系统，支持多光标编辑和多重选择，提高编码效率。

推荐 VSCode ，主打一个开源、免费、插件多，下载地址：https://code.visualstudio.com/。

可能会用到的 VSCode 插件

插件安装：点击侧边栏的扩展菜单或者快捷键Ctrl + Shift + X，搜索想安装的插件，然后点击Install/安装，部分插件安装完成后需要重启。

1. Better Comments
   更友好的注释插件。

2. Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
   VSCode 的中文语言包。

3. Code Spell Checker
   英语拼写检查插件，如：出现单词写错了会给提示。

4. 名称: Color Highlight
   颜色高亮显示插件。

5. 名称: CSS Peek
   快速找到定义的 css 样式插件。

6. Error Lens
   错误信息直接显示在本行代码后面。

7. ESLint
   代码格式化检测插件。

8. GitLens
   显示本行代码 git 提交记录。

9. Highlight Matching Tag
   标签高亮显示插件。

10. HTML CSS Support
    提供 HTML 和 CSS 的语法高亮、代码提示和自动补全等功能。

11. Image preview
    图片预览插件。

12. Import Cost
    显示引入的三方包大小。

13. indent-rainbow
    更友好的缩进插件。

14. IntelliSense for CSS class names in HTML
    给 HTML 添加 CSS 类名自动补全功能。

15. Prettier - Code formatter
    代码格式化插件。

16. Project Manager
    项目管理插件。

17. Thunder Client
    VSCode 发起 http 请求。

18. Todo Tree
    记录待办列表。

19. Turbo Console Log
    快捷键生成 console.log() 代码。

20. vscode-icons
    显示文件图标。

21. Vue - Official
    Vue 官方插件。

偶尔访问一下 VSCode 插件市场，看看下载量超高的插件，总会获得一些小惊喜。

总结

VSCode 配上插件，可以算是如虎添翼，从利器变为神器，分分钟从文本编辑器变身为一个完整的开发工具。