Mr谦
Mr谦

Vue-4.编译器VsCode

准备

Vue-1.零基础学习Vue
Vue-2.nodejs的介绍和安装
Vue-3.vue简介

为什么用VsCode

  • VsCode 是Vue官网首推的编译器
  • 它是完全免费的

下载安装VsCode

下载地址

安装的时候不停地下一步直到完成即可

安装插件

安装汉化插件

要将 Visual Studio Code（VSCode）汉化为中文，您可以按照以下步骤进行：

  1. 打开扩展面板： 在 VSCode 中，点击左侧的扩展图标（方块形状的图标），或者使用快捷键 Ctrl + Shift + X 打开扩展面板。

  2. 搜索汉化插件： 在扩展面板中，搜索关键词 “Chinese” 或 “汉化”，找到适用于 Visual Studio Code 的汉化插件。

  3. 选择汉化插件： 在搜索结果中，选择一个受欢迎且评分较高的汉化插件，如 “Chinese (Simplified) Language Pack for Visual Studio Code”（“汉化 (简体中文) Language Pack for Visual Studio Code”）。

  4. 安装插件： 点击选定的插件卡片，然后点击 “Install”（安装）按钮以安装汉化插件。

  5. 启用汉化插件： 安装完成后，您将看到一个 “Reload”（重新加载）按钮。点击它以重新加载 VSCode 并应用汉化插件。

  6. 切换语言为中文： 安装和启用插件后，您可以点击 VSCode 右下角的语言选择按钮（通常是显示当前语言代码的地方），选择 “中文 (简体)” 或 “Chinese (Simplified)” 作为界面语言。VSCode 将会切换为中文界面。

Vue-4.编译器VsCode_第1张图片
Vue-4.编译器VsCode_第2张图片

安装Vetur

Vetur 是一个专门为 Vue.js 开发设计的 Visual Studio Code（VSCode）扩展，提供了丰富的功能，包括语法高亮、智能提示、代码片段、错误检查和格式化等。以下是 Vetur 的基本使用方式：

  1. 安装 Vetur 扩展：

    • 打开 VSCode。
    • 进入 Extensions 视图（快捷键：Ctrl+Shift+X）。
    • 在搜索栏中输入 “Vetur” 并找到 Vetur 扩展。
    • 点击 “Install” 按钮安装扩展。

  2. 创建 Vue 项目：在您的 Vue 项目中安装 Vetur 扩展后，您将能够充分体验其功能。确保您的 Vue 项目使用 Vue CLI 创建，或者至少包含 Vue 单文件组件（.vue 文件）。

  3. 语法高亮和智能提示：

    • 打开一个 .vue 文件。
    • 您会注意到 Vetur 提供了针对 Vue 单文件组件的语法高亮和智能提示。例如，它可以智能提示 Vue 组件选项、数据属性、方法等。

  4. 代码片段：Vetur 提供了一些常用的代码片段，可加速您的开发。例如，输入 v-for 后按下 Tab 键，Vetur 会自动扩展为 v-for 的模板代码。

  5. 错误检查和格式化：

    • Vetur 可以帮助您检测 Vue 模板和脚本中的错误。如果您的代码存在问题，VSCode 将会显示错误和警告信息。
    • 通过右键单击代码区域，选择 “Format Document”，Vetur 可以帮助您格式化 Vue 模板和脚本。

  6. Vue 文件导航和交互：

    • 在左侧的导航栏中，您会看到一个 Vue 图标，表示您的 Vue 文件。点击它，可以查看该文件的各个部分（模板、脚本、样式）。
    • 您还可以使用 Vetur 提供的命令，如 “Vetur: Go to Definition”，通过点击变量或组件名来跳转到定义。

  7. 配置 Vetur：

    • 如果需要进一步自定义 Vetur 的行为，您可以在项目中的 .vscode/settings.json 文件中添加相关配置。您可以设置例如自动格式化、linting 规则等。

  8. 其他功能：

    • Vetur 还支持更多功能，如 Emmet 缩写、对 TypeScript 的支持等。您可以查阅 Vetur 的文档以了解更多信息。

这些是 Vetur 扩展的基本使用方式。它将极大地提升您在 VSCode 中开发 Vue 项目的效率和体验。如需更多详细信息，请参阅 Vetur 的官方文档。

安装ESLint

ESLint 是一种用于检查和修复 JavaScript 代码风格和错误的工具，它可以帮助您保持代码的一致性和质量。在 Visual Studio Code（VSCode）中，您可以通过集成 ESLint 扩展来使用它，以便在编辑代码时获得实时的错误和警告提示。以下是 ESLint 在 VSCode 中的使用方式：

  1. 安装 ESLint：
    在您的项目根目录中，通过 npm 或 yarn 安装 ESLint（如果尚未安装）：

    npm install eslint --save-dev

    或

    yarn add eslint --dev

  2. 初始化 ESLint 配置：
    初始化一个 ESLint 配置文件，您可以通过命令行工具或交互式工具来执行：

    npx eslint --init

    或

    yarn eslint --init

    这将会引导您完成配置文件的设置过程。您可以根据项目需求选择配置项，或者选择使用一个现有的 ESLint 配置。

  3. 安装 VSCode ESLint 扩展：

    • 打开 VSCode。
    • 进入 Extensions 视图（快捷键：Ctrl+Shift+X）。
    • 在搜索栏中输入 “ESLint” 并找到 ESLint 扩展。
    • 点击 “Install” 按钮安装扩展。

  4. 打开项目：在 VSCode 中打开您的项目文件夹。

  5. 配置项目根目录下的 .eslintrc.* 文件：
    在项目根目录下，根据您在步骤 2 中设置的配置，您会有一个 .eslintrc.js、.eslintrc.json 或 .eslintrc.yml 文件。这个文件定义了您的 ESLint 规则和配置。

  6. 编辑代码：
    开始编写代码。当您在 VSCode 中编辑代码时，ESLint 扩展会实时检测您的代码，并在编辑器中显示错误和警告。

  7. 修复问题：
    在编辑器中，当您将鼠标悬停在显示错误或警告的代码上时，您将看到一个小灯泡图标。点击它，您可以选择应用修复建议。这将会根据 ESLint 的规则自动修复代码。

  8. 手动执行修复：
    您也可以使用 ESLint 的命令行来手动修复代码。运行以下命令来修复项目中的所有 ESLint 错误：

    npx eslint --fix .

    或者使用 yarn：

    yarn eslint --fix .

通过上述步骤，您就可以在 VSCode 中使用 ESLint 扩展来实时检测和修复您的 JavaScript 代码中的问题。根据需要，您还可以在 .eslintrc.* 文件中定制您的 ESLint 配置，以适应项目的要求。

安装Prettier

Prettier 是一个代码格式化工具，它可以自动帮助您格式化代码，使其遵循一致的风格。在 Visual Studio Code（VSCode）中，您可以通过安装 Prettier 扩展来使用它，以便在编辑代码时自动进行代码格式化。以下是 Prettier 在 VSCode 中的使用方式：

  1. 安装 Prettier：
    在您的项目根目录中，通过 npm 或 yarn 安装 Prettier（如果尚未安装）：

    npm install prettier --save-dev

    或

    yarn add prettier --dev

  2. 安装 VSCode Prettier 扩展：

    • 打开 VSCode。
    • 进入 Extensions 视图（快捷键：Ctrl+Shift+X）。
    • 在搜索栏中输入 “Prettier - Code formatter” 并找到 Prettier 扩展。
    • 点击 “Install” 按钮安装扩展。

  3. 配置项目根目录下的 .prettierrc 文件：
    在项目根目录下创建一个 .prettierrc 文件，并根据您的项目需求配置 Prettier 规则。这个文件定义了您希望的代码格式化规则。

    示例 .prettierrc 文件：

    {
  "singleQuote": true,
  "semi": false,
  "tabWidth": 2
}

  4. 打开项目：在 VSCode 中打开您的项目文件夹。

  5. 编辑代码：
    开始编写代码。当您在 VSCode 中编辑代码时，Prettier 扩展会实时检测您的代码，并在编辑器中显示格式化建议。

  6. 手动执行格式化：
    在编辑器中，您可以右键单击代码区域，选择 “Format Document”，或者使用快捷键 Shift+Alt+F（Windows/Linux）或 Shift+Option+F（macOS）来手动触发格式化。

  7. 自动格式化设置：
    默认情况下，Prettier 扩展在保存文件时自动进行格式化。您可以通过 VSCode 设置来更改此行为。打开 VSCode 设置（Ctrl+, 或 Cmd+,），然后搜索 “Editor: Format On Save”，将其打开。

通过上述步骤，您就可以在 VSCode 中使用 Prettier 扩展，自动进行代码格式化，以确保您的代码风格始终保持一致。根据需要，您还可以在 .prettierrc 文件中定制您的 Prettier 配置，以适应项目的要求。

安装JavaScript Debugger

Visual Studio Code（VSCode）内置了强大的 JavaScript 调试器，允许您在编辑器中进行 JavaScript 代码的调试。以下是 VSCode JavaScript 调试器的基本使用方式：

  1. 打开项目：
    在 VSCode 中打开您的 JavaScript 项目文件夹。

  2. 在代码中设置断点：
    在您希望停下执行的代码行上，单击行号区域，以设置断点。断点是您在调试过程中要停下执行的位置。

  3. 启动调试会话：

    • 在 VSCode 的左侧边栏中，打开 “Run and Debug” 视图。
    • 在顶部选择一个调试配置，例如 “Node.js”。
    • 单击绿色的播放按钮（或按下 F5 键），以启动调试会话。

  4. 调试会话开始：

    • 调试会话开始后，VSCode 将在您设置断点的地方停下执行。
    • 您会看到调试工具栏，其中包含一些常用的调试控制按钮，如继续、暂停、单步执行等。

  5. 查看变量和表达式：

    • 在调试过程中，您可以查看局部和全局变量的值，以及计算表达式的值。
    • 在 VSCode 中，使用鼠标悬停在变量上或在调试控制台中输入表达式。

  6. 单步执行：

    • 使用 “Step Over”（F10）来单步执行代码，逐行执行并跳过函数调用。
    • 使用 “Step Into”（F11）来进入函数调用，跳转到函数内部的代码。

  7. 继续执行：

    • 使用 “Continue”（F5）继续执行，直到下一个断点或代码结束。

  8. 查看调用堆栈：

    • 在调试工具栏中，您可以点击 “Call Stack” 图标，查看当前调用堆栈的状态。

  9. 结束调试会话：

    • 调试过程完成后，您可以点击调试工具栏上的红色停止按钮，或者关闭调试工具栏上的调试会话按钮，来结束调试会话。

这些是 VSCode JavaScript 调试器的基本使用方式。通过设置断点、执行调试会话、查看变量等，您可以在 VSCode 中有效地进行 JavaScript 代码的调试。根据需要，您还可以在调试配置中添加自定义设置和选项，以满足特定的调试需求。

安装Vue VSCode Snippets

“Vue VSCode Snippets” 是一个针对 Vue.js 开发的 Visual Studio Code（VSCode）扩展，它提供了一组代码片段，可帮助您更快地编写 Vue 单文件组件的代码。以下是该扩展的使用方式：

  1. 安装 “Vue VSCode Snippets” 扩展：

    • 打开 VSCode。
    • 进入 Extensions 视图（快捷键：Ctrl+Shift+X）。
    • 在搜索栏中输入 “Vue VSCode Snippets” 并找到该扩展。
    • 点击 “Install” 按钮安装扩展。

  2. 创建 Vue 单文件组件：

    • 在您的 Vue 项目中，打开一个 .vue 后缀的文件，或者创建一个新的 .vue 文件。

  3. 使用代码片段：
    在 .vue 文件中，当您开始输入特定的前缀时，VSCode 将会自动弹出相应的代码片段列表。您可以使用 Tab 键或 Enter 键来选择代码片段。

    例如，当您输入 vbase 并按下 Tab 键，扩展会自动插入基本的 Vue 单文件组件结构，如下所示：

  4. 自动完成和参数填充：
    在代码片段中，使用 Tab 键可以在各个字段之间进行切换，以便您填写所需的信息。一些代码片段可能还支持参数填充，允许您自定义生成的代码。

    例如，在