VS Code 常用插件

  • vscode-icon : 让vscode资源目录加上图标、必备
  • HTML Snippets : 超级使用且初级的H5代码片段以及提示
  • HTML CSS Support : 让HTML标签上写class智能提示当前项目所支持的样式
  • Debugger for Chrome : 让vscode映射chrome的debug功能,静态页面都可以用vscode来打断点调试、配饰稍微复杂一点
  • Auto Close Tag : 自动添加HTML / XML关闭标签
  • Auto Rename Tag : 修改html标签,自动帮你完成尾部闭合标签的同步修改,和webstorm一样
  • CSS Peek : 跳转到 CSS 定义行
  • HTML Boilerplate : HTML 模板
  • htmltagwrap : 可以在选中HTML标签中外面套一层标签
  • Class autocomplete for HTML : 智能提示HTML class =“属性”
  • Minify – 代码压缩
  • Regex Previewer – 正则表达式预览
  • Quokka.js : 实时观看 javascript 的变量的变化
  • Prettify JSON 格式化JSON
  • JQuery Code Snippets : jquery提示工具
  • Node.js Modules Intellisense : 可以在导入语句中自动完成JavaScript / TypeScript模块
  • VueHelper : vue代码片段
  • vetur : 语法高亮、智能感知
  • ESLint : EsLint可以帮助检查Javascript编程时的语法错误
  • filesize : 在底部状态栏显示当前文件大小
  • SVG Viewer : SVG预览
  • Code Runner : 非常强大的一款插件,能够运行多种语言的代码片段或代码文件:C,C ++,Java,JavaScript,PHP,Python,Perl,Ruby,Go等
  • markdownlint : markdown 语法检查
  • TSLint : TypeScript语法检查
  • TypeScript Import TS自动import
  • TypeSearch TS声明文件搜索
  • Types auto installer 自动安装@types声明依赖
在 Mac 平台上使用 Visual Studio Code 时,有许多插件可以提升开发效率和编辑体验。以下是一些常用插件推荐,涵盖不同开发场景的需求: ### 插件分类与推荐 #### 1. 代码美化与格式化 - **Prettier**:一个流行的代码格式化工具,支持多种语言(如 JavaScript、TypeScript、CSS、HTML、JSON 等),可自动调整代码格式以保持一致性。 - **Beautify**:允许对 JavaScript、JSON、CSS 和 HTML 文件进行格式化。 - **Unibeautify**:一个开源项目,提供统一的代码美化体验,支持多种语言和自定义配置[^1]。 #### 2. 智能代码补全与提示 - **IntelliCode**:由微软开发,基于 AI 提供智能代码补全建议,提升编写效率,尤其适用于 JavaScript、TypeScript 和 Python 等语言[^2]。 - **Tabnine**:基于 AI 的代码补全工具,支持多语言,提供更精准的代码预测。 #### 3. 文件与标签管理 - **Auto Close Tag**:自动关闭 HTML/XML 标签,提高前端开发效率[^2]。 - **Auto Rename Tag**:在修改一个标签时,自动重命名对应的闭合标签,确保标签一致性。 - **Path Intellisense**:自动补全文件路径,减少手动输入错误。 #### 4. 版本控制与同步 - **GitLens**:增强 VS Code 内置的 Git 功能,提供代码提交历史、作者信息、差异对比等高级功能。 - **Settings Sync**:通过 GitHub 同步 VS Code 的设置、插件和快捷键配置,方便在多台设备间保持一致的开发环境。 #### 5. 浏览器集成与调试 - **Open in Browser**:在默认浏览器中打开 HTML 文件,便于前端调试。 - **Debugger for Chrome**:允许在 VS Code 中调试运行在 Chrome 浏览器中的 JavaScript 代码。 #### 6. 语言与框架支持 - **Python**:官方 Python 插件,提供 IntelliSense、Linting、调试、Jupyter Notebook 支持等功能。 - **ESLint**:JavaScript 和 JSX 的静态代码检查工具,帮助发现潜在问题。 - **Live Server**:提供本地开发服务器,支持实时重新加载,适用于前端项目。 #### 7. 主题与界面美化 - **Material Theme**:提供现代化的界面风格,支持深色与浅色模式。 - **One Dark Pro**:模仿 Atom 编辑器的经典主题,适合长时间编码。 - **VSCodeVim**:为 VS Code 添加 Vim 编辑器的行为,适合熟悉 Vim 操作的开发者。 #### 8. 其他实用插件 - **Bracket Pair Colorizer**:通过不同颜色高亮匹配的括号,提升代码可读性。 - **Todo Tree**:可视化代码中的 TODO 注释,便于任务管理。 - **Code Spell Checker**:检测拼写错误,适用于注释和字符串。 ### 示例配置:使用 Prettier 格式化 JavaScript 代码 ```json // .prettierrc 文件配置示例 { "semi": false, "singleQuote": true, "trailingComma": "es5", "printWidth": 80 } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值