Vscode搭建各种语言开发环境

WggLee
187 阅读2分钟

1.Vscode搭建各种语言开发环境

https://code.visualstudio.com/

首先是基础的环境插件，Material Icon Theme插件使得项目目录已经对应文件更加美观;简体中文汉化插件，非必须；Git Graph插件,我觉得是需要的，比较直观的看出代码的分支变化；Docker的插件，用着也不错。

image.png Material Icon Theme插件效果，入下图:

image.png

image.png

image.png

image.png

Vscode运行项目，实际上是根据.vscode目录中setting.json、launch.json

  • setting.json参考(也可配置总体的配置setting.json)
{
  "workbench.iconTheme": "material-icon-theme",
  "editor.fontSize": 14,
  "window.openFoldersInNewWindow": "on",

  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 500, // 延迟时间，单位为毫秒

  // "workbench.sideBar.location": "left",
  "editor.lineHeight": 18,
  "editor.wordWrap": "on",
  "editor.minimap.enabled": false,
  "editor.fontFamily": "Menlo, Monaco, 'Courier New', monospace",
  // 开启编辑器的保存自动格式化功能
  "editor.formatOnSave": true,
  // ESLint
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit"
  },
  "eslint.alwaysShowStatus": true,
  "prettier.printWidth": 300,
  "prettier.singleQuote": true,
  "prettier.arrowParens": "avoid",

  "editor.unicodeHighlight.nonBasicASCII": false,
  "editor.tabSize": 2,
  "files.exclude": {
    "**/.git": true,
    "**/.svn": true,
    "**/.hg": true,
    "**/CVS": true,
    "**/.DS_Store": true,
    "**/Thumbs.db": true
  },
  // 每行文字个数超出限制会被迫换行
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.ignoreProjectWarning": true,
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": false,
    },
    "prettyhtml": {
      "allowTrailingComma": "none",
      "semi": false,
      "printWidth": 300,
      "singleQuote": true,
      "wrapAttributes": false,
      "arrowParens": "avoid",
      "sortAttributes": false
    }
  },
  "explorer.confirmDelete": false,
  "java.errors.incompleteClasspath.severity": "ignore",
  "java.jdt.ls.java.home": "/Library/Java/JavaVirtualMachines/jdk-17.jdk/Contents/Home",
  "java.configuration.runtimes": [
    {
      "name": "JavaSE-1.8",
      "path": "/Library/Java/JavaVirtualMachines/jdk1.8.0_131.jdk/Contents/Home",
    },
    {
      "name": "JavaSE-17",
      "path": "/Library/Java/JavaVirtualMachines/jdk-17.jdk/Contents/Home",
      "default": true
    },
    {
      "name": "JavaSE-21",
      "path": "/Library/Java/JavaVirtualMachines/jdk-21.jdk/Contents/Home",
      "default": true
    },
  ],

  "editor.formatOnSave": true,
  "[java]": {
    "editor.defaultFormatter": "vscjava.vscode-javac",
    "editor.codeActionsOnSave": {
      "source.organizeImports": "explicit"
    }
  },
  "java.format.enabled": true,
  "java.format.comments.enabled": true,
  "java.format.formatter": "Eclipse",
  "java.format.settings.url": "https://raw.githubusercontent.com/google/styleguide/gh-pages/eclipse-java-google-style.xml",
  "java.saveActions.organizeImports": true,
  "maven.view": "hierarchical",
  "maven.excludedFolders": [
    "**/.*",
    "**/node_modules",
    "**/target",
    "**/bin",
    "**/archetype-resources"
  ],
  "maven.terminal.favorites": [],
  "cloudfoundry-manifest.ls.java.heap": "",
  "outline.problems.colors": false,
  "java.compile.nullAnalysis.mode": "automatic",
  "java.jdt.ls.vmargs": "-Dnacos=s",
  "java.configuration.maven.userSettings": "/Users/wgg/.m2/settings.xml",
  "java.configuration.maven.globalSettings": "/Users/wgg/.m2/settings.xml",
  "git.autofetch": true,
  "gitlens.graph.minimap.enabled": false,
  "window.openFilesInNewWindow": "on",
  "window.openWithoutArgumentsInNewWindow": "on",
  // "editor.defaultFormatter": "georgewfraser.vscode-javac",
  // "editor.defaultFoldingRangeProvider": "georgewfraser.vscode-javac",
  "cmake.configureOnOpen": true,
  "cmake.showOptionsMovedNotification": false,
  "go.toolsManagement.autoUpdate": true,
  "git.openRepositoryInParentFolders": "always",
  // "workbench.iconTheme": "material-icon-theme",
  "makefile.configureOnOpen": true,
  "path-autocomplete.extensionOnImport": true, // 导入文件时是否携带文件的拓展名
  "path-autocomplete.pathMappings": {
    "@": "${workspaceFolder}/src" // 配置@的路径提示，假设您的src目录在工作区的根目录下
  },
  "java.debug.settings.onBuildFailureProceed": true,
  "java.configuration.updateBuildConfiguration": "automatic",
  "java.imports.gradle.wrapper.checksums": [
    {
      "sha256": "02c6caaa828f8bf6a4a9aedc138f7d94b742b35d8fe966fe8a1b682663ec2302",
      "allowed": true
    }
  ],
  "vs-kubernetes": {
    "vscode-kubernetes.minikube-path-mac": "/Users/wgg/.vs-kubernetes/tools/minikube/darwin-amd64/minikube",
    "vscode-kubernetes.helm-path-mac": "/Users/wgg/.vs-kubernetes/tools/helm/darwin-amd64/helm"
  },
 
}

image.png

1.1 Java环境搭建

搭建最基础的java开发环境，仅仅需要Java extension pack插件（ps:这个是一个插件的集合，亲测，集合中的最后一个插件与其他插件的兼容性有问题，不建议安装）;Lombok Annotations Support for VS Code插件,Maven dependency explorer插件,MybatisX插件,用着也不错，可以安装作为辅助。

image.png

image.png

image.png

image.png

启动服务方式1

启动类上有点击按钮，启动类界面对应的右上角也有启动按钮

image.png

image.png

启动服务方式2

  • 配置服务启动launch.json
{
  // 使用 IntelliSense 了解相关属性。 
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "java",
      "name": "XxxApplication",
      "request": "launch",
      "mainClass": "com.xxx.xxx.XxxApplication",
      "projectName": "xxx-server"
    },
    {
      "type": "java",
      "name": "Mock",
      "request": "launch",
      "mainClass": "com.xxx.xxx.util.Mock",
      "projectName": "xxx-server"
    }
  ]  
}

按键盘F5启动服务（debug）模式：

image.png

1.2 Go环境搭建

Go for Visual Studio Code插件安装

image.png

go的开发工具下载，安装需要连接GitHub!

image.png

勾选全部工具

image.png

启动服务方式1

  • 配置服务启动launch.json
{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Package",
            "type": "go",
            "request": "launch",
            "mode": "auto",
            "program": "${workspaceFolder}/main.go",
            "args": [
               "--config", "/Users/wgg/Documents/workDay/xxxxxx/config/config.yaml",
               "serve", "app",
               "--env", "dev"

            ],
            "env": {
                "GOLOG": "debug"
            },
            "showLog": false
        }
    ]
}

按键盘F5启动服务（debug）模式：

image.png

1.3 python环境搭建

微软提供的插件安装

image.png

启动服务方式1

在对应的python启动脚本右上角有启动按钮，如下图：

image.png

启动服务方式2

  • 配置服务启动launch.json
{
   // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Python Application",
            "type": "debugpy",
            "request": "launch",
            // 指定 Python 脚本的入口文件
            "program": "${workspaceFolder}/V2/main.py", 
            // 传递给 Python 脚本的命令行参数
            "args": ["server", "app", "--config", "${workspaceFolder}/config/config.yaml"],  
            "env": {},  // 环境变量（可根据需要添加）
            "console": "integratedTerminal",  // 在 VS Code 的集成终端中运行
            "justMyCode": false  // 是否只调试用户代码（可选）
        }
    ]
}

按键盘F5启动服务（debug）模式：

image.png

1.4 Vue环境搭建

open in browser插件安装

image.png

Vue - Official插件安装

image.png

初始化Vue2的项目可以参考官网；本地学习的项目，nodejs的依赖如下

{
  "name": "first-vue2",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "axios": "^0.21.1",
    "core-js": "^3.8.3",
    "vue": "^2.6.14",
    "vue-router": "^3.5.1",
    "vuex": "^3.6.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "less": "^4.0.0",
    "less-loader": "^8.0.0",
    "vue-template-compiler": "^2.6.14"
  }
}

启动服务: npm run dev

image.png

image.png

avatar
文章
阅读
粉丝