VS Code 安装、配置教程及插件推荐

黑面前端小书生

已于 2024-08-29 10:03:42 修改

阅读量511

点赞数 10

分类专栏：前端开发准备工作文章标签： vscode

于 2024-08-29 09:34:57 首次发布

本文链接：https://blog.csdn.net/qq_58096041/article/details/141640890

版权

前端开发准备工作专栏收录该内容

3 篇文章 0 订阅

订阅专栏

下载

官网下载：exe安装程序会有安装步骤，需要选择配置一些选项；zip无需安装，解压即可用。
- Download Visual Studio Code - Mac, Linux, Windows
更新日志
- Visual Studio Code July 2024

安装

只有两步需要调整，其余部分点击下一步即可

自定义选择安装路径
选择需要附加的功能

编辑器配置

通过Ctrl + ,可以快速打开VsCode的设置面板，

在搜索栏直接输入以下路径可快速定位配置

字体大小
- editor>font-size
tab大小
- editor>tab size
自动保存
- files>auto save
空文件夹不折叠
- compact Folders （取消勾选这个选项）

代码片段

点击左下角设置图标 => 点击snippets （首选项）
点击new snippets，在出现的输入框内输入想要建设代码片段的文件名称
文件新建成功，即可开始编辑代码片段
上方可以看到代码片段文件所在路径，找到对应的文件夹，可以看到所有的代码片段文件，可直接进行编辑。

vue代码片段示例

{
    "vue2模板": { // 提示信息
            "prefix": "v2", // 输入快捷键
            "body": [ // 具体内容
                    "<template>",
                    "  <div>$0</div>",
                    "</template>",
                    "",
                    "<script>",
                    "export default {",
                    "  data () {",
                    "    return {\n",
                    "    }",
                    "  },",
                    "  components: {\n",
                    "  },",
        "  mounted() {\n",
                    "  },",
                    "  methods: {\n",
                    "  },",
                    "}",
                    "",
                    "</script>",
                    "",
                    "<style scoped lang='scss'>",

                    "</style>",
                    ""
            ],
            "description": "vue2代码块" // 具体描述信息
    },
    "vue3模板": {
        "prefix": "v3",
        "body": [
            "<template>",
            "  <div>",
            "",
            "  </div>",
            "</template>",
            "",
            "<script setup lang='ts'>",
            "import { ref, reactive, toRefs, computed, watch } from 'vue'",
            "</script>",
            "",
            "<style scoped lang='scss'>",
            "$2",
            "</style>", 
            ""
        ],
    }
}

效果图

快捷键

快捷键	功能	个人喜好(改键)
`Shift 左箭头`	删除本行左侧所有内容	`Delete All Aleft`
`Ctrl D`	快速选中相同的词
`Alt Shift 上下箭头`	复制当前行的内容到 (上 / 下) 一行
`Alt 鼠标左键` (可点击, 可选中区块内容)	多鼠标光标同时存在
`Ctrl F`	当前文件搜索
`Ctrl H`	当前文件替换
`Ctrl /`	单行注释
`Alt Shift /`	区块 / 多行注释	`Toggle Block Comment`
`Ctrl Shift P`	打开命令面板
`Ctrl ,`	打开设置面板
`按住Ctrl + K + S`	打开快捷键配置面板
`Ctrl B`	打卡 / 关闭左侧面板
Ctrl + `	打开终端

扩展插件

点击左侧扩展程序图标或通过Ctrl Shift X键盘快捷方式打开扩展列表页

编辑器插件

1、汉化包 - Chinese (Simplified)

vscode默认语言是英文, 可以通过安装汉化包使其转成中文界面，点击install安装，重启后即可生效。

推荐使用英文界面，多少可以提升一点英语阅读能力，认识一些单词

2、浏览器打开文件 - open in browser

使用Alt + B快捷键在默认浏览器中打开当前html文件

使用Shift + Alt + B选择浏览器

3、起本地服务 - live server

Live Server 插件是一个用于前端开发的扩展，它的主要作用是提供一个本地开发服务器，以便实时预览和调试网页应用程序。其最大特点在于热重载，即开发者可实时预览代码效果。 因为Live Server允许开发者在浏览器中实时预览您正在编辑的网页。每当保存HTML、CSS、JavaScript文件时，该插件会自动刷新浏览器，以便开发者可以立即看到页面的更改效果。

4、打开UI稿 - Figma for VS Code

目前需要figma团队是专业版才可以支持vscode使用此插件

Figma for VS Code允许您在不离开文本编辑器的情况下，直接打开 UI 设计稿，不用频繁切换窗口，复制样式，提升开发效率和体验。

5、编辑器主题 - Material Theme

6、编辑器图标 - Material Icon Theme

7、预览Markdown - `Markdown Preview Enhanced`

8、快速打开github仓库代码

GitHub Repositories 扩展允许您直接在Visual Studio Code中快速浏览、搜索、编辑和提交到任何远程GitHub存储库, 无需将代码clone至本地。

代码美化

1、注释颜色分类 - Better Comments

Better Comments扩展将帮助您在代码中创建更人性化的注释。

2、预览图片 - Image preview

在代码行左侧和鼠标悬停路径时显示图像预览。

3、错误提示 - Error Lens

代码错误标红，并提示具体错误信息。

4、单词拼写校验 - Code Spell Checker

单词拼写校验，错误提示

5、生成代码图片 - CodeSnap

选中要截图的代码，单击鼠标右键会弹出菜单，点击codesnap选项，即可生成图片

6、代码格式化 - Prettier

格式化选中的代码
- Shift + Alt + F 或 Ctrl + Shift + I
格式化当前文件
- Shift + Alt + F
- Ctrl + Shift + P，然后输入 Format Document

此插件可以使用专门的格式化配置文件；

在你的项目根目录下创建或检查 .prettierrc 文件，并确保其配置正确

// 简单的配置示例
{
  "arrowParens": "always",
  "bracketSpacing": true,
  "endOfLine": "lf",
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "printWidth": 80,
  "trailingComma": "all",
  "htmlWhitespaceSensitivity": "ignore"
}