vs code 常用插件

===================== vs code =====================

1. vscode-icons

修改文件图标地址: 首选项->文件图标主题

2. Live Server
启动本地服务
3. highlight-matching-tag
4. Auto Close Tag
5. Auto Rename Tag
6. Path Autocomplete
7. Path Intellisense ---- 函数调用指向 ,用法:ctrl + 鼠标左
8. Eslint ---- 错误提示 & 快速修复
9. One Dark Pro 界面主题

===================== css =====================

1. Easy Compile

可以编译, less , sass, scss 相当好用, 用法已参考安装说明

"easycompile.sass": {
      "sourceMap": true,
      "out": "${workspaceRoot}/src/main/webapp/static/analysis/style/css/"
    },

===================== JS =====================

1. HTML Snippets
2. HTML CSS Support
3. JS-CSS-HTML Formatter

配置: ctrl + shift + p 选择 Formatter Config, 即可配置 onSave, js, css, html

4. jQuery Code Snippets
5. Beautify

有第 3 个可以不用安装

6. Bootstrap 3 Snippets
7. Easy LESS
 .map 文件生成,见安装说明

##=Vue=

1. Vetur
2. vue
3. Vue 2 Snippets
4. Vue VSCode Snippets
5. VueHelper
6. vue-swift-i18n 国际化

需要修改文件路径, localpath, 如: src/assets/languages
右键替换 或者 快捷键:ctrl + alt + u 翻译 ctrl + alt + i 替换翻译 ctrl + alt + o 翻译回显
在这里插入图片描述

7. IntelliCode 代码智能提示 【Visual Studio IntelliCode】
在 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 } ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值