vscode好用的插件以及setting.json

xiaoxixi_1104

已于 2024-09-21 14:16:42 修改

阅读量1.1k

点赞数 13

文章标签：前端

于 2024-09-21 14:10:26 首次发布

本文链接：https://blog.csdn.net/xiaoxixi_1104/article/details/142416207

版权

vscode插件

1: Auto Rename Tag

作者: Jun Han
用途: 自动同步重命名 HTML/XML 标签。当你重命名一个标签时，插件会自动同步匹配的闭合标签，避免手动修改出错，提升开发效率。

2: Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code

作者: Microsoft
用途: 提供简体中文语言支持，将 VS Code 的界面语言切换为中文简体。适合习惯中文操作的开发者使用。

3: Color Highlight

作者: Sergii N
用途: 该插件用于在代码编辑器中高亮显示颜色值。它会自动识别 CSS、SCSS、LESS、HTML 和其他支持颜色属性的文件中的颜色值，并在代码旁边或背景上显示相应的颜色，帮助开发者直观地看到颜色效果。

4: Git Graph

作者: mhutchie
用途: Git Graph 是一个用于可视化 Git 仓库的插件，开发者可以通过图形界面查看分支、提交历史、合并记录等，帮助开发者更直观地管理 Git 仓库的历史记录和分支操作。

5: GitLens — Git supercharged

作者: GitKraken
用途: GitLens 是一个功能强大的 Git 扩展，它允许开发者查看每一行代码的提交者和更改记录，深入了解代码的演变过程，并轻松对比、查看代码历史、提交日志等。

6: Google Translate

作者: Hancel.Lin
用途: 通过 Google Translate 翻译代码中的文字片段，支持多种语言之间的快速翻译。适用于需要查看或翻译国际化内容的开发场景。

7: Live Server

作者: Ritwick Dey
用途: 启动本地开发服务器，并提供实时刷新功能。当开发者在 HTML、CSS 或 JavaScript 文件中做出修改时，浏览器会自动刷新页面，显示最新的效果。

8: One Dark Pro(GitHub theme也不错)

作者: binaryify
用途: Atom 编辑器经典的 One Dark 主题的 VS Code 版本，提供暗色背景配色方案，适合长时间开发，减少眼睛疲劳。

9: open in browser

作者: TechER
用途: 允许开发者在浏览器中快速打开当前的 HTML 文件。开发者可以通过右键点击 HTML 文件，然后选择 "Open in Browser"，快速预览文件。

10: Path Intellisense

作者: Christian Kohler
用途: 提供路径自动补全功能。当开发者在代码中引用文件或模块时，插件会自动建议可能的路径并进行补全，支持绝对路径和相对路径。

11: REST Client

作者: Huachao Mao
用途: REST Client 允许开发者在 VS Code 中直接发送 HTTP 请求并查看响应结果，支持 GET、POST、PUT、DELETE 等常见的 HTTP 方法，方便开发者快速测试 API。

12: TODO Highlight

作者: Wayou Liu
用途: 高亮显示代码中的 TODO、FIXME、NOTE 等关键字，方便标记待办事项、重要注释和修复点，帮助开发者快速定位需要完成或修复的内容。

13: JetBrains Icon Theme

作者: JetBrains
用途: 该插件为 Visual Studio Code 提供了一套与 JetBrains IDE 统一风格的图标主题，使开发者能够通过直观的图标识别文件类型和状态，提升开发效率和体验。

14: Vue - Official

作者: Vue
用途: 提供 Vue.js 的官方语法高亮支持，适用于 Vue 2 和 Vue 3 的开发。帮助开发者更好地编写 Vue 项目中的组件和模板。

15: Vue VSCode Snippets

作者: hollowtree
用途: 提供 Vue 2 和 Vue 3 的代码片段生成功能，开发者可以通过快捷键快速生成 Vue 组件的模板、生命周期钩子等常用结构，提升开发效率。

16: vue-helper

作者: shenjiaolong
用途: 为 Element-UI、Element Plus、Ant Design Vue 等 Vue 组件库提供增强功能，如代码补全、属性提示和组件文档链接，提升使用这些 UI 组件库的开发体验。

17: ESLint

作者: Microsoft
用途: 集成 JavaScript 的代码规范检查工具，帮助开发者找到并修复代码中的问题，确保代码风格的一致性，减少潜在的错误。

18: Prettier - Code formatter

作者: Prettier
用途: 代码格式化工具，支持多种语言和框架。它可以自动格式化代码，确保代码的一致性和可读性，并与 ESLint 一起使用以保持代码风格和规范。

19. Error Lens

作者: Alexander
用途: 让错误和警告直接显示在代码行内，而不是依赖底部的 Problems 面板。这样你在查看代码时可以更直观地看到错误和警告。

20. Peacock

作者: Peacock
用途: 允许你为不同的工作区设置不同的配色方案。

21. EditorConfig for VS Code

作者: EditorConfig
用途: 帮助团队保持一致的代码风格。它会根据 .editorconfig 文件自动调整编辑器的配置，如缩进、换行符、编码等。

22: npm Intellisense

作者: Christian Kohler
用途: 自动补全 npm 模块导入路径，支持常见的 JavaScript、TypeScript 和 Vue.js 开发。开发者在编写 import 语句时可以快速补全模块路径。

23: MarsCode: AI Coding Assistant

作者: Mars Studio
用途: MarsCode 是一款面向中文开发者的智能编程助手插件，专注于代码补全和生成功能。它支持多种编程语言，能够根据中文注释和上下文理解开发者的需求，提供智能代码建议、生成代码片段和模板。MarsCode 可以帮助开发者快速搭建前端项目结构，并生成符合规范的代码。它非常适合在中文编程环境中使用，特别适合初学者和希望提升编码效率的开发者。

24: Polacode: Polaroid for your code

作者: P & P
用途: Polacode 是一个用于生成美观代码截图的 VS Code 插件。它能够将代码转化为高质量的图片，非常适合用于学习笔记、博客文章或者代码分享。你只需将代码复制粘贴到 Polacode 面板中，即可快速生成图片。Polacode 使用 VS Code 当前的主题配色，生成的截图能够更好地体现代码的风格。对于希望记录和分享代码片段的开发者来说，Polacode 是一个极具价值的工具。

setting.json

{

// ------------------- 样式与美观 -------------------

// 使用 One Dark Pro 主题

"workbench.colorTheme": "One Dark Pro Mix",

// 禁用 One Dark Pro 主题的斜体效果，避免代码斜体显示

"oneDarkPro.italic": false,

// 使用 vscode-jetbrains-icon 图标主题，为文件和文件夹设置丰富的图标

"workbench.iconTheme": "vscode-jetbrains-icon-theme-2023-light",

//自定义当前行高亮的背景颜色

"workbench.colorCustomizations": {

// 设置高亮行的背景颜色

"editor.lineHighlightBackground": "#3a3f4b",

// 设置高亮行的边框颜色

"editor.lineHighlightBorder": "#3a3f4b"

// ------------------- 编辑器设置 -------------------

// 将制表符的缩进宽度设置为2个空格

"editor.tabSize": 2,

// 禁用自动检测缩进类型，以保持项目中统一的缩进风格

"editor.detectIndentation": false,

// 在保存文件时自动格式化代码，确保代码风格一致

"editor.formatOnSave": true,

// 当代码超过编辑器宽度时自动换行，避免左右滚动条

"editor.wordWrap": "on",

// 设置编辑器的默认字体大小为 14，适合阅读和编写代码

"editor.fontSize": 14,

// 开发中常用的编程字体

"editor.fontFamily": " IBM Plex Mono, Source Code Pro, Fira Code",

// 禁用连体字效果，保持代码字符的独立性

"editor.fontLigatures": false,

// 在保存文件时自动在文件末尾添加一个空行。这是许多代码风格指南中的一部分，某些代码检查工具可能会发出警告（空行是指：例如两个函数之间有个空行）

"files.insertFinalNewline": true,

// 可忽略 node_modules 和 dist 文件夹，，提高编辑器性能

"files.exclude": {

"**/node_modules": false,

"**/dist": false

// 启用自动补齐括号，提高编写代码时的效率

"editor.autoClosingBrackets": "always",

// 启用自动补齐引号，提高编写代码时的效率

"editor.autoClosingQuotes": "always",

// 启用代码补全建议，提升代码编写效率

"editor.quickSuggestions": {

// 在非注释和字符串的部分启用代码建议

"other": true,

// 在注释中禁用代码补全建议，避免干扰

"comments": false,

// 在字符串中启用代码补全建议，提高输入效率

"strings": true

// 显示行号，便于调试和代码导航

"editor.lineNumbers": "on",

// 高亮显示活动行，便于快速定位当前行

"editor.renderLineHighlight": "all",

// ------------------- 代码片段补全设置 -------------------

// 为 vue-html 文件启用 html 代码片段补全

// 为 javascript 启用 javascriptreact 代码片段补全

"emmet.includeLanguages": {

"vue-html": "html",

"javascript": "javascriptreact"

// ------------------- TODO Highlight 设置 -------------------

// 关键词大小写不敏感，不区分大小写匹配

"todohighlight.isCaseSensitive": false,

// 自定义关键词及其样式配置

"todohighlight.keywords": [

// 自定义关键词 "TODO"，用于标记待办事项

{

"text": "TODO:",

"color": "#ffffff",

"backgroundColor": "#FF6347",

"isWholeLine": false

// 自定义关键词 "FIXME"，用于标记需要修复的问题

{

"text": "FIXME:",

"color": "#ffffff",

"backgroundColor": "#FF8C00",

"isWholeLine": false

// 自定义关键词 "NOTE"，用于标记笔记内容

{

"text": "NOTE:",

"color": "#1B5E20",

"backgroundColor": "#C8E6C9",

"isWholeLine": true

// 自定义关键词 "CMT"，Comment的缩写,用于普通注释和信息点

{

"text": "CMT:",

"color": "#2E7D32",

"backgroundColor": "#C8E6C9",

"isWholeLine": false

}

// ------------------- Live Server 配置 -------------------

// 设置 Live Server 的端口为 5500

"liveServer.settings.port": 5500,

// ------------------- npm Intellisense 配置 -------------------

// 使用 ES6 风格导入语法补全

"npm-intellisense.importES6": true,

// 使用单引号补全模块导入路径

"npm-intellisense.importQuotes": "single",

// 在 devDependencies 中启用 npm 模块补全

"npm-intellisense.scanDevDependencies": true,

// ------------------- GitLens 配置 -------------------

// 启用 Error Lens 插件，提升错误和警告的可见性

"errorLens.enabled": true,

// 使用行背景模式显示错误和警告

"errorLens.messageBackgroundMode": "line",

// GitLens: 强化 Git 支持

// 在编辑器当前行显示最后一次提交者和提交时间

"gitlens.currentLine.enabled": true,

// 启用悬停显示详细的 Git 历史信息

"gitlens.hovers.enabled": true,

// 启用 CodeLens 不显示 Git 信息

"gitlens.codeLens.enabled": false,

// 如果显示,仅在函数、类和方法中显示 CodeLens 信息

"gitlens.codeLens.symbolScopes": ["function", "class", "method"],

// 使用绝对日期格式显示提交信息

"gitlens.defaultDateStyle": "absolute",

// 设置日期格式为 YYYY-MM-DD

"gitlens.defaultDateFormat": "YYYY-MM-DD",

// 禁用文件树的紧凑模式，显示完整的文件结构层次

"gitlens.views.repositories.files.compact": false,

// "gitlens.views.repositories.files.threshold": 1,

// ------------------- Path Intellisense 配置 -------------------

// 禁用目录后自动添加斜杠

"path-intellisense.autoSlashAfterDirectory": false,

// 导入路径时自动补全文件扩展名

"path-intellisense.extensionOnImport": true,

// 启用隐藏文件的路径补全

"path-intellisense.showHiddenFiles": true,

// 自定义路径别名，将 '@' 映射到项目的 src 文件夹

"path-intellisense.mappings": {

"@": "${workspaceRoot}/src"

// ------------------- ESLint 配置 -------------------

// 在保存文件时自动修复 ESLint 检查到的错误

"editor.codeActionsOnSave": {

"source.fixAll.eslint": "always",

"source.organizeImports": "always"

// 启用 ESLint 检查的文件类型

"eslint.validate": ["javascript", "javascriptreact", "vue", "typescript", "typescriptreact"],

// 自动检测 ESLint 的工作目录

"eslint.workingDirectories": [

{

"mode": "auto"

}

// ------------------- Prettier 配置 -------------------

// 为以下文件类型设置 Prettier 为默认格式化工具

"[html]": {