标签 vscode 下的文章

2024-08-25

VSCode自带格式化功能，可以通过快捷键或者在设置中配置自动保存来实现。

快捷键格式化：
- 在Windows/Linux上，使用 Shift + Alt + F 或者在设置中搜索 format 找到 editor.formatOnType 并启用。
- 在macOS上，使用 Cmd + Shift + F 或者在设置中搜索 format 找到 editor.formatOnType 并启用。
开启自动保存：
- 打开设置(File > Preferences > Settings 或 Code > Preferences > Settings)。
- 在搜索框中输入 auto save。
- 选择 editor.formatOnSave 并启用。

如果你想要在保存文件时自动格式化CSS，可以在VSCode的设置中添加以下配置：




{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  }
}

这样，每次保存文件时，VSCode都会自动应用格式化和代码修复。如果你使用的是CSS预处理器如SCSS或LESS，确保你安装了相应的扩展，如Sass 或 LESS，这样VSCode才能识别文件格式并进行格式化。

- 阅读更多 -

一看就会系列之如何使用Vscode配置Html

System

2024-08-25

所有,html

在Visual Studio Code (VScode) 中配置 HTML 环境主要涉及以下几个步骤：

安装必要的扩展：
打开 VScode，在左侧的扩展商店中搜索并安装以下扩展：
- HTML Snippets：提供 HTML 的代码提示。
- HTML CSS Support：提供 CSS 代码提示和补全。
- Live Server：提供一个简易的本地服务器，并能够在保存文件时自动刷新页面。

配置 settings.json：

打开 VScode 的设置（快捷键 Ctrl + , 或 Cmd + ,），在用户设置中添加以下配置：




{
    "emmet.includeLanguages": {
        "html": "html"
    },
    "files.associations": {
        "*.html": "html"
    }
}

创建 HTML 文件并编写基本的 HTML 结构：

在 VScode 中新建一个 .html 文件，例如 index.html，然后输入以下基本结构：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

保存文件，并使用 Live Server 打开：
右键点击编辑器中的 HTML 文件，选择 Open with Live Server，这样会在浏览器中打开您的页面，并且在每次保存文件时自动刷新。

以上步骤配置了一个基本的 HTML 环境，您可以开始编写和测试您的 HTML 页面。

- 阅读更多 -

从根本上优雅地解决 VSCode 中的 Python 模块导入问题

System

2024-08-24

所有,python




# 假设我们有一个Python模块叫做my_module.py，它提供了一个函数叫做my_function()
# 我们将展示如何优雅地从VSCode中导入这个模块
 
# 方法1: 直接导入整个模块
try:
    import my_module
    my_module.my_function()
except ModuleNotFoundError:
    print("模块 my_module 未找到，请确保它在你的Python环境中安装且路径正确。")
 
# 方法2: 导入模块时捕获异常并给出提示
try:
    from my_module import my_function
    my_function()
except ModuleNotFoundError:
    print("模块 my_module 未找到，请确保它在你的Python环境中安装且路径正确。")
 
# 方法3: 使用try-except结构优雅地处理可能的异常
try:
    from my_module import my_function
except ModuleNotFoundError:
    print("模块 my_module 未找到，请确保它在你的Python环境中安装且路径正确。")
else:
    my_function()
finally:
    print("模块导入完成。")

这个代码示例展示了如何优雅地处理Python模块导入中可能出现的异常。在实际应用中，可以根据具体情况选择适合的导入方式和异常处理策略。

System

2024-08-24

所有,golang

在Visual Studio Code (VSCode) 中写 Go 语言时，以下是一些常见的问题和解决方案：

Go 单元测试：
- 问题：VSCode 默认不运行单元测试。
- 解决方案：安装并使用 go.test 命令或通过 test 函数运行测试。
goimports 没有自动格式化依赖：
- 问题：VSCode Go 插件默认不使用 goimports 来自动格式化代码。
- 解决方案：安装 goimports：go get -u golang.org/x/tools/cmd/goimports，并在 VSCode 设置中启用 go.useCodeSnippetsOnFunctionSuggest 和 go.formatTool。
接口实现：
- 问题：VSCode 不提供自动生成接口实现的功能。
- 解决方案：使用 gopls 提供的特性，如安装 fillstruct 代码段或使用 godoc -http=:6060 然后在浏览器中查看类型文档。
错误的工作区路径：
- 问题：如果工作区路径设置错误，VSCode 可能无法正确解析依赖。
- 解决方案：确保 GOPATH 和 GOROOT 环境变量正确设置，并在 VSCode 设置中正确配置 go.gopath 和 go.goroot。
代码提示和自动完成问题：
- 问题：VSCode Go 插件可能无法提供代码提示或自动完成。
- 解决方案：确保安装了最新版本的 Go 插件，并检查是否启用了 go.autocompleteUnimportedPackages。
代码导航和符号查找问题：
- 问题：VSCode 可能无法正确导航至定义或查找符号。
- 解决方案：确保安装了 gopls 并在 VSCode 设置中启用它。
代码格式化问题：
- 问题：VSCode 默认格式化可能不满足需求。
- 解决方案：使用 gofmt 或 goimports 进行格式化，并确保在 VSCode 设置中正确配置。
错误的依赖管理：
- 问题：如果依赖管理不当，可能会遇到依赖未正确下载或版本冲突的问题。
- 解决方案：使用 go mod tidy 来清理不需要的依赖，并使用 go get 添加缺失的依赖。

这些是一些常见的使用 VSCode 编写 Go 代码时可能遇到的问题和相应的解决方案。如果你遇到了特定的问题，请提供详细信息，以便获得更具体的帮助。

- 阅读更多 -

vscode 运行VUE项目没有出现 npm脚本

System

2024-08-24

所有,npm

报错问题："vscode 运行 VUE 项目没有出现 npm 脚本" 可能是因为以下原因：

npm脚本未定义：确保在项目的package.json文件中定义了需要运行的npm脚本。通常，Vue项目会有serve或dev脚本用于启动开发服务器。
没有正确配置任务运行器：如果你使用的是VS Code的内置终端或者任务运行器（Terminal > Run Task...），确保在.vscode文件夹下的tasks.json文件中配置了正确的命令。
没有正确设置终端或者快捷键：检查是否设置了正确的快捷键绑定或者在终端中输入了正确的命令。

解决方法：

检查package.json文件，确保有正确定义的npm脚本。例如：




"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build"
}

如果使用了任务运行器，确保.vscode/tasks.json文件中配置了正确的命令，例如：




{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "npm: start",
      "type": "npm",
      "script": "start",
      "group": "build",
      "problemMatcher": "$npm-watch"
    }
  ]
}

确保你在终端中运行了正确的npm命令。通常，你可以直接运行：
```
npm run serve
```
或者，如果你在tasks.json中配置了相应的任务，可以通过快捷键触发。

如果以上步骤都正确无误，但仍然不显示npm脚本，可能需要重启VS Code或检查是否有其他插件冲突。

- 阅读更多 -

vscode报错：找不到模块“vue”或其相应的类型声明。ts(2307)

System

2024-08-24

所有,vue.js

这个错误表明Visual Studio Code (VSCode)的TypeScript编译器无法找到vue模块的类型声明文件（通常是vue.d.ts）。Vue类型声明文件用于提供TypeScript对Vue特定API的类型支持。

解决方法：

确保你已经安装了Vue的类型声明文件。如果你使用npm或yarn作为包管理器，可以通过以下命令安装：




npm install @types/vue --save-dev
# 或者
yarn add @types/vue --dev

如果你已经安装了类型声明文件，但仍然遇到这个错误，可能是因为VSCode的TypeScript语言服务没有正确地加载它们。可以尝试重启VSCode或重新加载窗口。
检查tsconfig.json文件中的配置。确保compilerOptions中有一个type字段，它包含对Vue类型声明的引用：




{
  "compilerOptions": {
    "types": ["vue/v2"]
  }
}

如果你使用的是Vue 3.x，可能需要改为：




{
  "compilerOptions": {
    "types": ["vue/v3"]
  }
}

如果上述步骤不解决问题，可以尝试清除项目中的node_modules文件夹和package-lock.json或yarn.lock文件，然后重新安装依赖：




rm -rf node_modules
rm -f package-lock.json
# 或者
rm -rf node_modules
rm -f yarn.lock

然后重新安装依赖：




npm install
# 或者
yarn install

如果问题依然存在，检查是否有其他配置或插件影响了TypeScript语言服务。例如，如果你使用了Vetur插件，它可能会有自己的设置影响TypeScript语言特性。

总结：

确保Vue类型声明文件已安装，并在tsconfig.json中正确配置。如果问题依然存在，尝试重启VSCode或重新加载窗口，清理和重新安装依赖，检查其他可能的配置或插件影响。

- 阅读更多 -

vscode中js、vue部分代码为白色的解决方法

System

2024-08-24

所有,vue.js

在VSCode中，如果JavaScript（js）和Vue文件中的代码显示为白色，这通常意味着主题被设置为了具有高对比度的主题，如"High Contrast"主题。若要恢复正常的代码颜色，可以选择一个不同的主题，或者在当前主题的设置中调整颜色主题。

解决方法：

更改VSCode的主题：
- 打开VSCode。
- 前往“文件” > “首选项” > “设置”（在Windows上或“Code” > “首选项” > “设置”在Mac上）。
- 在搜索框中输入color theme，然后从列表中选择一个新的主题，如Default Dark+或One Dark Pro。
在当前主题中调整颜色：
- 打开VSCode设置（快捷键Ctrl + ,）。
- 在搜索框中输入workbench.colorTheme，查看当前主题。
- 在设置中搜索text，找到与你的文件类型相关的颜色设置（例如，javascript.syntax.object）。
- 点击设置旁边的齿轮图标，选择“在settings.json中编辑”。
- 调整相关颜色代码，例如将"workbench.colorCustomizations": {}内的颜色设置为你想要的颜色。

请注意，如果你使用的是高对比度主题，可能需要调整主题才能恢复正常的代码颜色。如果你需要保持对比度高的需求，请确保所做的更改不会影响可读性。

- 阅读更多 -

VsCode运行android带渠道的react native

System

2024-08-23

所有,react native

在Visual Studio Code (VSCode) 中运行带有渠道的 React Native 应用程序，你需要确保你的环境已经配置好了对应的渠道。以下是一个简化的步骤和示例代码，用于在VSCode中设置和运行带有特定渠道的React Native应用程序。

确保你的React Native项目已经创建并且能在VSCode中正常打开。
在项目中找到android/app/build.gradle文件，并添加你的渠道常量定义。




android {
    ...
    defaultConfig {
        ...
        manifestPlaceholders = [channelId: "myChannel"]
        ...
    }
    ...
    productFlavors {
        prod {
            manifestPlaceholders = [channelId: "myChannel"]
        }
        dev {
            manifestPlaceholders = [channelId: "devChannel"]
        }
    }
    ...
}

在android/app/src/main/AndroidManifest.xml中，使用${channelId}占位符来设置meta-data的值。




<application>
    ...
    <meta-data android:name="com.facebook.react.NotificationChannelName" android:value="${channelId}" />
    ...
</application>

打开终端或命令提示符，确保你已经安装了所有必要的依赖，并运行以下命令来安装JAVA和Android SDK依赖。




npx react-native link

运行应用程序，确保你先启动了本地的开发服务器。




npx react-native start

使用以下命令之一来运行应用程序：




npx react-native run-android --variant=prodDebug // 为prod渠道
npx react-native run-android --variant=devDebug // 为dev渠道

确保你的设备已连接并且在运行上述命令时选择了正确的设备。

以上步骤和代码示例提供了一个简化的方法来在VSCode中设置和运行带有特定渠道的React Native应用程序。

System

2024-08-23

所有,react native

在VSCode中配置React Native Android环境，并使用夜神模拟器进行开发的步骤概要如下：

安装Node.js和npm。
安装React Native CLI：npm install -g react-native-cli。
创建一个新的React Native项目：react-native init AwesomeProject。
安装Android Studio，并配置Android SDK和AVD Manager。
打开Android Studio，设置好SDK和JDK路径。
在AVD Manager中创建和启动一个Android虚拟设备。
确保夜神模拟器已经安装并且启动。
在VSCode中打开React Native项目。
在项目目录中运行react-native run-android。

注意：确保你的夜神模拟器和VSCode能够通信，夜神模拟器可能需要配置连接VSCode的IP和端口。

以下是一个简化的示例步骤：




# 安装Node.js和npm
curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt-get install -y nodejs
 
# 安装React Native CLI
npm install -g react-native-cli
 
# 创建新的React Native项目
react-native init AwesomeProject
 
# 在项目目录中运行Android应用
cd AwesomeProject
react-native run-android

确保你的夜神模拟器已启动，并且在VSCode中按F5或选择“Run and Debug”开始调试。在launch.json文件中配置外部Android设备连接，如下所示：




{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "react-native",
      "request": "launch",
      "name": "Debug on Android Device",
      "platform": "android",
      "target": "custom",
      "packageName": "你的应用包名",
      "deviceId": "夜神模拟器设备ID"
    }
  ]
}

在launch.json中设置正确的deviceId，使其指向夜神模拟器设备。然后，在VSCode中启动调试会话。如果一切配置正确，应用应该能够在夜神模拟器上运行。

- 阅读更多 -

VSCode配置React Native调试环境

System

2024-08-23

所有,react native




{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug Android",
            "type": "reactnative",
            "request": "launch",
            "platform": "android",
            "target": "android",
            "sourceMaps": true,
            "packageName": "com.yourcompany.yourapp",
            "device": "React Native",
            "debugServer": [
                "localhost:8081"
            ],
            "expoServerPort": 19000,
            "expoServerUrl": "http://localhost:19000",
            "env": {
                "NODE_OPTIONS": "--inspect-brk"
            }
        }
    ]
}

这个配置文件是针对VSCode的launch.json文件，用于设置React Native项目的调试环境。其中的关键点包括指定调试目标平台（android），调试服务器地址（localhost:8081），以及如何设置环境变量以启用Node.js的断点调试（"NODE\_OPTIONS": "--inspect-brk"）。这个配置适用于使用Expo进行React Native开发的情况。

- 阅读更多 -