vscode 前端开发配置与插件

vscode 前端开发配置与插件

1. Vscode标准配置项

{
  // vscode默认终端：cmd
  "terminal.integrated.defaultProfile.windows": "Command Prompt",
  // 编辑器字体大小
  "editor.fontSize": 24,
  // 制表符2个空格
  "editor.tabSize": 2,
  // eslint检测开关
  "eslint.enable": true,
  "editor.codeActionsOnSave": {
    // eslint代码保存时自动进行eslint修复
    "source.fixAll.eslint": true
  }
}

2. 常用插件

1. volar

相信使用 VSCode 开发 Vue2 的同学一定对 Vetur 插件不会陌生，作为 Vue2 配套的 VSCode 插件，它的主要作用是对 Vue 单文件组件提供高亮、语法支持以及语法检测。

而随着 Vue3 正式版发布，Vue 团队官方推荐 Volar 插件来代替 Vetur 插件，不仅支持 Vue3 语言高亮、语法检测，还支持 TypeScript 和基于 vue-tsc 的类型检查功能。

使用时需要注意：

  • 首先要禁用 Vetur 插件，避免冲突；

  • 推荐使用 css/less/scss 作为 style的语言，因为这些基于 vscode-css-language 服务提供了可靠的语言支持；

  • 如果使用 postcss/stylus/sass 的话，需要安装额外的语法高亮扩展。postcss 使用 language-postcss，stylus 使用 language-stylus 拓展，sass 使用 Sass 拓展；

  • Volar 不包含 ESLint 和 Prettier，而官方的 ESLint 和 Prettier 扩展支持 Vue，所以需要自行安装。

2. Vue VSCode Snippets

Vue VSCode Snippets 插件旨在为开发者提供最简单快速的生成 Vue 代码片段的方法，通过各种快捷键就可以在 .vue文件中快速生成各种代码片段。简直是 Vue3 开发必备神器。

该插件支持：Volar、Vue2 和 Vue3。

3. Auto Close Tag

Auto Close Tag 插件是一个很好用的 VS Code 扩展，它对生产率有很大影响。顾名思义，当我们在结束标记中键入结束括号时，它将添加结束标记。它支持HTML，Handlebars，XML，PHP，Vue，JavaScript，Typescript，JSX等。

4. Auto Rename Tag

Auto Rename Tag是一个自动重命名tag的插件，就是修改其中一个tag，另一半也会跟着变。

4. Vite

Vite 插件可以让我们打开项目后，就能自动启动开发服务器，允许开发者无需离开编辑器即可预览和调试应用。支持一键启动、构建和重启项目。

5. Vue Peek

Vue Peek 插件用来拓展 Vue 代码编辑的体验，可以让我们快速跳转到组件、模块定义的文件。

6. Vue Theme

Vue Theme 插件提供了不错的 Vue 主题，还支持配置不同颜色，感觉还不错。

7. chinese

vscode编辑器汉化包，安装后，在 locale.json 中添加 “locale”: “zh-cn”，即可载入中文（简体）语言包。

8. Git History

GitHistory可查看和搜索git日志以及图形和详细信息，同时还支持分支比较，分支管理等操作，非常方便。

9.GitLens

详细的 Git 提交日志。Git 重度使用者必备，尤其是多人协作时：哪一行代码，何时、何人提交都有记录。再也不用担心背锅了！

10. JavaScript (ES6) code snippets

该插件为JavaScript、TypeScript、HTML、React和Vue提供了ES6语法支持。ES6 语法智能提示及快速输入，不仅仅支持 .js，还支持.ts，.jsx，.tsx，.html，.vue。

11. ESLint

JavaScript 语法纠错，可以自定义配置，也可以参照官网的配置，摆正开发者的代码格书写格式。

12. Prettier-Code formatter

代码格式工具，和esLint不同在于，ESLint只是一个代码质量工具(确保没有未使用的变量、没有全局变量，等等)；而Prettier只关心格式化文件(最大长度、混合标签和空格、引用样式等)。可见，代码格式统一的问题，交给Prettirer再合适不过了。和Eslint配合使用，风味更佳。

13. Beautify

Beautify是格式化代码的插件可美化JS、JSON、CSS、Sass、HTML（其他类型的文件不行），可在文件夹根目录下创建 .jsbeautifyrc 文件。一般用Eslint + prettier + beautify组合使用 ，Beautify格式化vue的html部分。

14. Stylelint

StyleLint 是『一个强大的、现代化的 CSS 检测工具』, 与 ESLint 类似, 是通过定义一系列的编码风格规则帮助我们避免在样式表中出现错误。stylelint是运行工具，stylelint-config-standard是stylelint的推荐配置，stylelint-order是CSS属性排序插件(先写定位，再写盒模型，再写内容区样式，最后写 CSS3 相关属性)。

15. HTML Snippets

HTML代码片段，该插件可为你提供html标签的代码提示，不用键入尖括号了（一般适用于新手前端开发）。

16. Element UI Snippets

Element UI框架的代码提示

17. Path IntelliSense

路径提示

18. Sass

sass支持

19. IntelliSense For CSS class names in Html

在html代码中提示class名

3. 强烈推介（生产力）

1. Code Runner

Code Runner 可以运行多种语言的代码片段或代码文件，包括 JavaScript。

它有点类似于 Quokka，但它支持多种编程语言，并且只能运行一个代码片段。

图片

2. GitHub Copilot

GitHub Copilot 使用 OpenAI Codex 从您的编辑器中实时建议代码和整个功能。经过数十亿行公共代码的训练，GitHub Copilot 将包括注释和方法名称在内的自然语言提示转化为数十种语言的编码建议。

图片

3. Import Cost

此工具将在编辑器中内联显示导入包的大小。作为一个有抱负的前端开发者，我们应该对导入包的体积敏感，从而优化性能。

图片

4. REST Client

作为 Web 开发人员，我们经常需要使用 REST API 发出 HTTP 请求。为了检查 API 和检查响应，使用了 Postman 等工具。但是，当您的编辑器可以轻松完成相同的任务时，为什么还要使用不同的应用程序呢？REST Client 允许我们发送 HTTP 请求并直接在 Visual Studio Code 中查看响应。

图片

5. Image preview

当我们在 HTML 或 CSS 中导入图像时，它会在侧边栏中显示图像。通过这个特性，我们可以快速观察代码是否写得正确。

图片

6. JSON转TS

项目中的 TypeScript 类型定义通常需要与 JSON 数据的格式保持一致。它可以帮助我们将 JSON 对象转换为 typescript 接口。

从选择转换（Shift + Ctrl + Alt + S）：

图片

7. Tabnine

Tabnine 是 AI 代码完成助手，可提高编码准确性并提高生产力。

posted @ 2023-06-17 15:02  Cxymds  阅读(505)  评论(0)  编辑  收藏  举报