将vscode打造为你的开发工具的首选

前言

什么是IDE?

IDE = 文本编辑 + 搜索 + 代码导航 + 编译调试 + 测试 + …

JetBrains系列功能强大,但也挺耗资源的,vscode相对轻量级一点,且插件众多,日新月异,不可不学。我实际上这两个IDE是一起用的。
我主要使用四大编程语言:Java、Python、JS/TS和golang。

  • Java主要做RESTful API server,以及和各种后端数据打交道。以及Android应用。
  • Python主要写爬虫和深度学习程序
  • Javascript/typescript主要写前端Vue/React程序,以及小部分Electron程序
  • golang还不精通,主要写一些小工具,网络相关的居多

为了方便日后查阅,特把个人的配置整理出来。下面都是针对MacOS环境的设置。

在vscode里配置java开发比较繁琐,其它几个语言相对容易些。如果搞掂了这四种语言,意味着我一个Mac本上可以同时跑多个工程,不用担心卡顿了。

vscode主要配置

settings.json是主要配置文件,settings.json可以放在工作区(.vscode/settings.json),也可以放在用户区和全局下。
优先级:工作区>用户>全局默认,前面的配置覆盖后面的,这样做的好处是你可以为不同工作区、不同用户做不同配置,而不会互相干扰。
例如在MacOS下:~/Library/Application Support/code/User/settings.json就是用户区的。全局的在安装目录下。

vscode的两个主要快捷键

ctrl+p 文件搜索快捷键
ctrl+shift+p 命令快捷键
command + , 调出设置

创建你的代码模版

选择菜单里的 文件 > 首选项 > 用户代码片段,使用 $1,$2 等指定光标位置,这些数字指定了光标跳转的顺序,$0表示最终光标位置。
下面是一个创建react native组件的模板:

{
	// Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
	// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
	// used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
	// Placeholders with the same ids are connected.
	// Example:
	"react native component template": {		
		"prefix": "react",
		"body": [
			"/**",
            "* @file ${2: $TM_FILENAME_BASE}",
            "* @date $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE",
            "*/",
            "$0",
            "",
            "import React from 'react';",
			"import {",
			"    View,",
			"    Text,",				
			"    StyleSheet",				
			"} from 'react-native';",
			"import { useEffect, useState } from 'react';",
            "import PropTypes from 'prop-types';",
            "",
            "const $TM_FILENAME_BASE = (props) => { ",
			"    const [state, setState] = useState()",
			"    const fetchData = () => {",
			"        try {",
			"           fetch('')",		
            "           .then((response) => response.json())",
            "           .then((responseJson) => { ",
            "           })",
			"           .catch((error) => {",
			"               console.error(error);",
			"            });",
        	"        } catch (error) {",
            "            console.error(error);",
			"        } finally {",
			"    ",
			"        }",
            "    return <View></View>",
            "};",
            "",
            "$TM_FILENAME_BASE.propTypes = {};",
			"const styles = StyleSheet.create({",
			"    container: {",
			"        justifyContent: 'center',",
			"        flex: 1",
			"    }",
			"})",
            "",
            "export default $TM_FILENAME_BASE;",    
		],
		"description": "React Native Component Template"
	}
}

Java

目标:在vscode中运行和调试SpringBoot应用,执行gradle构建,和执行JUnit测试用例。
先总结一下:

  • vscode打开带pom.xml或build.gradle的文件夹时,会自动识别为java project。没有任何build tool的文件夹被视为unmanaged foldler,就得手工配置Java runtime和source folder以及classpath了。
  • vscode通过maven和gradle插件,可以分别创建maven project和gradle project。注意,目前不支持Android工程,搞Android开发还是老老实实用Android Studio吧。

有时遇到不能正确识别出Java project,可以尝试清除vscode缓存,在~/Library/ApplicationSupport/Code/User/workspaceStorage下,都删除好了。也可以安装Workspaces clean cache这个插件。

配置JDK和Gradle环境

先查看机器上装有哪些JDK版本:

/usr/libexec/java_home -V

Matching Java Virtual Machines (6):
    17.0.5 (x86_64) "JetBrains s.r.o." - "JBR-17.0.5+1-653.23-nomod 17.0.5" /Library/Java/JavaVirtualMachines/jbr-17.0.5-osx-x64-b653.23/Contents/Home
    17.0.5 (x86_64) "Eclipse Adoptium" - "OpenJDK 17.0.5" /Library/Java/JavaVirtualMachines/temurin-17.jdk/Contents/Home
    17.0.1 (x86_64) "Oracle Corporation" - "OpenJDK 17.0.1" /Users/ku/Library/Java/JavaVirtualMachines/openjdk-17.0.1/Contents/Home
    16.0.2 (x86_64) "Amazon.com Inc." - "Amazon Corretto 16" /Users/ku/Library/Java/JavaVirtualMachines/corretto-16.0.2/Contents/Home
    1.8.351.10 (x86_64) "Oracle Corporation" - "Java" /Library/Internet Plug-Ins/JavaAppletPlugin.plugin/Contents/Home
    1.8.0_181 (x86_64) "Oracle Corporation" - "Java SE 8" /Library/Java/JavaVirtualMachines/jdk1.8.0_181.jdk/Contents/Home
/Library/Java/JavaVirtualMachines/jbr-17.0.5-osx-x64-b653.23/Contents/Home

可以根据需要切换一下JDK版本:

export JAVA_HOME=/usr/libexec/java_home -v 17

然后,在settings.json中,配置java.home和gradle.home:

"java.jdt.ls.java.home": "/Library/Java/JavaVirtualMachines/jbr-17.0.5-osx-x64-b653.23/Contents/Home",
"spring-boot.ls.java.home": "/Library/Java/JavaVirtualMachines/jbr-17.0.5-osx-x64-b653.23/Contents/Home",
"java.import.gradle.home": "/opt/gradle-7.5.1"

主要插件

  • Java Extension for Pack
  • Spring Boot Extension Pack
  • Gradle Extension Pack
  • Gradle Language Support
  • Lombok: 智能生成 setter getter toString

常见的配置

{
"java.compile.nullAnalysis.mode": "disabled",
"java.dependency.packagePresentation": "hierarchical"

}

launch.json配置

{
"configurations": [
    {
        "type": "java",
        "name": "Spring Boot-BudgetApplication<budget>",
        "request": "launch",
        "cwd": "${workspaceFolder}",
        "console": "internalConsole",
        "mainClass": "com.someone.budget.BudgetApplication",
        "projectName": "cms",
        "args": ["--module-path","lib/javafx-sdk-13/lib","--add-modules=javafx.controls"]
    }
]

args和vmArgs都有两种写法:
“vmArgs”: “-Xms256m -Xmx1g -Dserver=production”
或者:
“vmArgs”: [“-Xms256m”, “-Xmx1g”, “-Dserver=production”]

运行测试用例

正常在测试视图里能列出所有的测试用例。如果要查看用例中System.out.println()输出,切换到窗口:
在这里插入图片描述

常见问题

  • 无法找到Test
    解析:vscode没有识别出java工程,所以无法enable java test。可以清理vscode缓存和无关的文件,然后重新导入
  • 命令行编译正确,但vscode问题里一堆的编译错误
    解析:估计装了过多的插件,导致部分插件误报问题
    在这里插入图片描述
    红框标出的插件不用装,这也是vscode的一大问题:插件太繁荣,有时装多了会起冲突
  • For queries with named parameters you need to use provide names for method parameters. Use @Param for query method parameters, or when on Java 8+ use the javac flag -parameters.; nested exception is java.lang.IllegalStateException: For queries with named parameters you need to use provide names for method parameters. Use @Param for query method parameters, or when on Java 8+ use the javac flag -parameters.

这个问题是需要给java compiler加上一个参数:-parameters
在settings.json中定义:

"java.settings.url": "/pathto/settings.prefs"

然后,新建一个文件settings.prefs,放到任意位置均可,内容如下:

org.eclipse.jdt.core.compiler.codegen.methodParameters=generate

常用快捷键

Shift+Alt+O :自动导入包
Ctrl + Command + B :跳到实现

Python

主要插件

settings.json配置

{
    "python.testing.unittestEnabled": false,
    "python.testing.nosetestsEnabled": false,
    "python.testing.pytestEnabled": true,
    "python.testing.autoTestDiscoverOnSaveEnabled": true,
    "python.testing.pytestArgs": [
        ".",
        "--capture=no",
        "-q", 
        "--disable-warnings"
    ],  
}

launch.json配置示例

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
      {
          "name": "Python",
          "type": "python",
          "request": "launch",
          "stopOnEntry": false,
          "pythonPath": "C:\\Users\\hetao\\anaconda3\\python.exe",
          "program": "${file}",
          "cwd": "${workspaceRoot}",
          "env": {},
          "envFile": "${workspaceRoot}/.env",
          "debugOptions": [
              "WaitOnAbnormalExit",
              "WaitOnNormalExit",
              "RedirectOutput"
          ]
      }
  ]
}

Javascript/typescript

vscode对于typescript的支持最为友好,因为它本身就是用ts开发的。

常用插件

settings.json样例

{
  "cSpell.words": ["Element Plus", "element-plus"],
  "typescript.tsdk": "node_modules/typescript/lib",
  "editor.formatOnSave": true,
  "npm.packageManager": "pnpm",
  "eslint.probe": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "html",
    "vue",
    "markdown",
    "json",
    "jsonc"
  ],
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "html",
    "vue",
    "markdown",
    "json",
    "jsonc"
  ],
  "vite.devCommand": "pnpm run dev -- --",
  "i18n-ally.localesPaths": "packages/locale/lang",
  "i18n-ally.enabledParsers": ["ts"],
  "i18n-ally.enabledFrameworks": ["vue", "vue-sfc"],
  "i18n-ally.keystyle": "nested",
  "iconify.includes": ["ep"],
  "unocss.root": "./docs"
}

Golang

主要插件

  • Go for Visual Studio Code
  • Go Tools: 按ctrl+shift+p 调出命令面板,输入go install tools 选Go: Install/Update Tools,将所有 16 个插件都勾选上。

settings.json

{
  "go.goroot": "",
  "go.gopath": "",
  "http.proxy": "192.168.0.1:1081", // 根据需要,安装包需要
  "go.inferGopath": true,
  "go.autocompleteUnimportedPackages": true,
  "go.gocodePackageLookupMode": "go",
  "go.gotoSymbol.includeImports": true,
  "go.useCodeSnippetsOnFunctionSuggest": true,
  "go.useCodeSnippetsOnFunctionSuggestWithoutType": true,
  "go.docsTool": "gogetdoc",
}

参考

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

北极象

如果觉得对您有帮助,鼓励一下

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值