下载

插件准备

  • 主题与图标

    • Atomize (Atom One Dark theme)

    • Material Icon Theme

  • 前端开发

    • Vetur

    • Auto Rename Tag

    • macros

  • Java 开发

    • Extension Pack for Java

    • Lombok Annotations Support for VS Code

    • Spring Boot Extension Pack

    • KoroFileHeader (添加头部注释)

VS 配置文件

  • 配置文件打开方式

    • cmd +shift + p,然后搜 Open Raw Default Settings,回车就可打开默认的 vscode 配置文件。

    • 用户配置:点击左下角的设置齿轮,找到 settings(ctrl+,),点击右上角的 open Settings(JSON)

    • 我全部的配置如下,你需要修改 jdk 的目录地址

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      53
      54
      55
      56
      57
      58
      59
      60
      61
      62
      63
      64
      65
      66
      67
      68
      69
      70
      71
      72
      73
      74
      75
      76
      77
      78
      79
      80
      81
      82
      83
      84
      85
      86
      87
      88
      89
      90
      91
      92
      93
      94
      95
      96
      97
      98
      99
      100
      101
      102
      103
      104
      105
      106
      107
      108
      109
      110
      111
      112
      113
      114
      115
      116
      117
      118
      119
      120
      121
      122
      123
      124
      125
      126
      127
      128
      129
      130
      131
      132
      133
      134
      135
      136
      137
      138
      139
      140
      141
      142
      143
      144
      145
      146
      147
      148
      149
      150
      151
      152
      153
      154
      155
      156
      157
      158
      159
      {
      //------------------------ 编辑器相关 ------------------------
      "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
      "editor.suggestSelection": "first",
      "editor.fontFamily": "'JetBrains Mono', Consolas, 'Courier New', monospace",
      "editor.lineHeight": 22,
      "editor.letterSpacing": 0.5,
      "editor.cursorStyle": "line",
      "editor.cursorWidth": 2,
      "editor.cursorBlinking": "solid",
      // 猜测字符集编码
      "files.autoGuessEncoding": true,
      // 每次保存的时候自动格式化
      "editor.formatOnPaste": false,
      //tab 代码缩进修改成 2 个空格
      "editor.tabSize": 2,
      // 控制编辑器是否自动格式化粘贴的内容。格式化程序必须可用,并且能针对文档中的某一范围进行格式化。
      "editor.formatOnSave": false,
      //图标主题
      "workbench.iconTheme": "material-icon-theme",
      // 编辑器颜色主题
      "workbench.colorTheme": "Atomize",
      // 以像素为单位控制字体大小
      "editor.fontSize": 14,
      // 启用或禁用字体连字。
      "editor.fontLigatures": false,
      // 控制字体粗细
      "editor.fontWeight": "400",
      // 启用/禁用导航路径
      "breadcrumbs.enabled": false,
      //控制编辑器在空白字符上显示符号的方式。
      "editor.renderWhitespace": "boundary",
      //当在 VS Code 中重命名或移动文件时,启用或禁用自动更新导入路径。要求工作区使用高于 2.9 版本的 TypeScript。always: 始终自动更新路径。
      "javascript.updateImportsOnFileMove.enabled": "always",
      // 用户代码片段在建议窗口小部件中的位置
      "editor.snippetSuggestions": "top",
      // 启用后,按下 TAB 键,将展开 Emmet 缩写。
      "emmet.triggerExpansionOnTab": true,
      // 控制是否在编辑器中输入时自动重命名
      "editor.linkedEditing": true,
      //透明度
      "winopacity.opacity": 230,
      //------------------------ Vue 相关 ------------------------
      //关闭 Vetur 的模板验证
      "vetur.validation.template": false,
      // 使用 tab(制表位)缩进而非空格;
      "vetur.format.options.useTabs": true,
      "vetur.format.defaultFormatterOptions": {
      // prettyhtml:[prettyhtml] 默认格式化
      "prettyhtml": {},
      // prettier:[css、postcss、scss、less、stylus、js、ts] 默认格式化
      "prettier": {
      "printWidth": 500 // 换行字符串阈值
      }
      },
      //------------------------ HTML 相关 ------------------------
      "liveServer.settings.fullReload": true,
      "liveServer.settings.CustomBrowser": "chrome:PrivateMode",
      "htmlPreview.openWith": "vscode",
      //------------------------ Java 相关 ------------------------
      // 如果配置的 java.home 版本低于 11,VS CODE 会提示用户安装 java 11 或以上版本的 JDK。
      "java.home": "C:\\Users\\fsun7\\soft\\Java\\jdk-11",
      "java.configuration.runtimes": [
      {
      "name": "JavaSE-1.8",
      "path": "C:\\Users\\fsun7\\soft\\Java\\jdk1.8.0_202",
      "default": true
      },
      {
      "name": "JavaSE-11",
      "path": "C:\\Users\\fsun7\\soft\\Java\\jdk-11"
      }
      ],
      "files.exclude": {
      "**/.classpath": true,
      "**/.project": true,
      "**/.settings": true,
      "**/.factorypath": true
      },
      // 配置 lombok
      "java.jdt.ls.vmargs": "-noverify -Xmx1G -XX:+UseG1GC -XX:+UseStringDeduplication -Dfile.encoding=UTF-8 -javaagent:\"c:\\Users\\fsun7\\.vscode\\extensions\\gabrielbb.vscode-lombok-1.0.1\\server\\lombok.jar\"",
      //------------------------ koroFileHeader ------------------------
      // 函数注释
      "fileheader.cursorMode": {},
      // 头部注释
      "fileheader.customMade": {
      "Description": " ",
      "author": "fulsun",
      "Date": "Do not edit",
      "LastEditTime": "Do not edit",
      "FilePath": "Do not edit"
      },
      // 插件配置项
      "fileheader.configObj": {
      // 关闭默认添加头
      "createHeader": false,
      // 配置保持自动添加头
      "autoAlready": true, // 默认开启
      "autoAdd": true, // 自动添加头部注释开启才能自动添加
      // 设置过后只有该数组里面的文件 才会自动添加头部注释
      "supportAutoLanguage": ["java"],
      "headInsertLine": {
      "php": 2, // php 后缀的文件,在第二行插入文件头部注释
      "*": 3 // 所有文件都在第 3 行插入注释(除了 php)
      },
      // 禁止。json .md 文件,自动添加头部注释
      "prohibitAutoAdd": ["json", "md"]
      },
      //------------------------ auto-rename-tag 插件 ------------------------
      "auto-rename-tag.activationOnLanguage": [
      "html",
      "xml",
      "php",
      "javascript"
      ],
      //------------------------ macros 插件 ------------------------
      // 需要修改 %AppData%\Code\User\keybindings.json
      "macros": {
      // 插入下一行
      "insertLineAfter": ["editor.action.insertLineAfter"],
      // 添加分号并回车配置
      "addSemicolonToLineEndAndThenWrap": [
      "cursorLineEnd",
      {
      "command": "type",
      "args": {
      "text": ";"
      }
      },
      "editor.action.insertLineAfter"
      ]
      },
      //------------------------ 配置终端 ------------------------
      "terminal.integrated.profiles.windows": {
      "MINGW32": {
      "path": "C:\\Windows\\System32\\cmd.exe", //shell 路径
      "icon": "terminal-cmd",
      "args": [
      "-defterm",
      "-mingw32",
      "-no-start",
      "-here",
      "/K chcp 936 >nul" // 指定 GBK 编码 ,UTF-8 为 65001
      ],
      "env": {
      "CHERE_INVOKING": "1",
      "MSYSTEM": "MINGW32"
      }
      }
      },
      "terminal.integrated.defaultProfile.windows": "MINGW32",
      "terminal.integrated.fontSize": 12,
      "terminal.integrated.copyOnSelection": true,
      // 始终允许不受信任的文件引入受信任的工作区,而不显示提示。
      "security.workspace.trust.untrustedFiles": "open",
      "redhat.telemetry.enabled": false,
      "explorer.confirmDelete": true,
      "explorer.confirmDragAndDrop": false
      }

设置快捷键

  • 配合 macros 实现一些快捷键

  • 编辑文件 %AppData%\Code\User\keybindings.json

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    [
    {
    "key": "shift+enter",
    "command": "macros.insertLineAfter",
    "when": "editorTextFocus && !editorReadonly"
    },
    {
    "key": "ctrl+shift+enter",
    "command": "macros.addSemicolonToLineEndAndThenWrap",
    "when": "editorTextFocus && !editorReadonly"
    }
    ]

代码模板

  • 选择菜单里的 文件 > 首选项 > 用户代码片段

  • 选择你需要自定义模板的文件,配置对应文件 json

  • 把代码片段写在 json 里。每个代码段都是在一个代码片段名称下定义的,并且有 prefix、body 和 description。prefix 是用来触发代码片段的。使用 $1,$2 等指定光标位置,这些数字指定了光标跳转的顺序,$0 表示最终光标位置。

  • 自动生成代码段语句网站 https://snippet-generator.app/

vue 模板

  • vue 模板

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    {
    // Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and
    // description. 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:
    // "Print to console": {
    // "prefix": "log",
    // "body": [
    // "console.log('$1');",
    // "$2"
    // ],
    // "description": "Log output to console"
    // }
    "Print to console": {
    "prefix": "vue",
    "body": [
    "<!-- $1 -->",
    "<template>",
    "<div class='$2'>$5</div>",
    "</template>",
    "",
    "<script>",
    "",
    "// 导入的其他文件 例如:import moduleName from 'modulePath';",
    "",
    "export default {",
    "",
    "//import 所引入的组件注册",
    "components: {",
    "",
    "},",
    "",
    "data() {",
    " return {",
    "",
    " };",
    "},",
    "",
    "//监听属性",
    "computed: {",
    "",
    "},",
    "",
    "//监控 data 中的数据变化",
    "watch: {",
    "",
    "},",
    "",
    "//方法集合",
    "methods: {",
    "",
    "},",
    "",
    "//生命周期 - 组件实例刚被创建",
    "beforeCreate() { ",
    "",
    "},",
    "//创建完成 访问当前 this 实例",
    "created() {",
    "",
    "},",
    "//挂载之前",
    "beforeMount() { ",
    "",
    "},",
    "//挂载完成 访问 DOM 元素",
    "mounted() {",
    "",
    "},",
    "//更新之前",
    "beforeUpdate() { ",
    "",
    "},",
    "//更新之后",
    "updated() { ",
    "",
    "},",
    "//for keep-alive 缓存功能,组件被激活时调用",
    "activated() {",
    "",
    "},",
    "//for keep-alive 组件被移除时调用",
    "deactivated() {",
    "",
    "},",
    "//组件销毁之前调用",
    "beforeDestroy() {",
    "",
    "},",
    "//组件销毁之后调用",
    "destroyed() {",
    "",
    "},",
    "}",
    "</script>",
    "<style lang='scss' scoped>",
    "//@import url($3); 引入公共 css 类",
    "$4",
    "</style>"
    ],
    "description": "Log output to console"
    }
    }

java 模板

  • 常用模板

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    {
    "打印字符串": {
    "prefix": "sout",
    "body": ["System.out.println(\"${1:}\");"],
    "description": "打印字符串"
    },
    "SpringBoot 启动类": {
    "prefix": "mainboot",
    "body": [
    "public static void main(String[] args) {",
    " SpringApplication.run(${1:}.class, args);",
    "}"
    ],
    "description": "SpringBoot 启动类"
    }
    }

创建 maven 项目

  • Maven 环境

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    C:\Users\fsun7>mvn -v
    Apache Maven 3.6.3 (cecedd343002696d0abb50b32b541b8a6ba2883f)
    Maven home: C:\Users\fsun7\soft\maven\apache-maven-3.6.3\bin\..
    Java version: 11, vendor: Oracle Corporation, runtime: C:\Users\fsun7\soft\Java\jdk-11
    Default locale: en_US, platform encoding: Cp1252
    OS name: "windows 10", version: "10.0", arch: "amd64", family: "windows"

    C:\Users\fsun7>java -version
    openjdk version "11" 2018-09-25
    OpenJDK Runtime Environment 18.9 (build 11+28)
    OpenJDK 64-Bit Server VM 18.9 (build 11+28, mixed mode)
  • 网络不好可以使用阿里云的镜像地址

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <?xml version="1.0" encoding="UTF-8"?>
    <settings xmlns="http://maven.apache.org/SETTINGS/1.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/SETTINGS/1.0.0 http://maven.apache.org/xsd/settings-1.0.0.xsd">
    <pluginGroups>
    </pluginGroups>
    <proxies>
    </proxies>
    <servers>
    </servers>
    <mirrors>
    <mirror>
    <id>aliyunmaven</id>
    <mirrorOf>*</mirrorOf>
    <name>aliyunmaven</name>
    <url>https://maven.aliyun.com/repository/public</url>
    </mirror>
    </mirrors>
    <profiles>
    </profiles>
    </settings>

创建项目

  • 创建方式:

    • 在打开的文件目录下右键-> 创建 maven 项目
    • 快捷键 Ctrl+Shift+P 打开命令框,选择 >maven: 创建 Maven 项目
  • 选择原型,根据需要自己选择,这里我选择 quickStart, springboot 可以选择 spring-boot-blank-archetype.

  • 底部的交互终端中按照交互提示输入 groupId、artifactId 这些。最后选择项目的目录。

  • 然后等待一会,vscode 会在右下脚提示项目创建成功了,点击 open 打开项目。就是我们熟悉的 maven 项目格式了。

JDK8 环境配置

  • 到了上面一步,项目就可以正常运行了
  • 如果项目要求用 jdk8, 我们也能手动指定配置

添加 jdk 和 jre 相关配置

  • 在通过首选项修改 settings.json,添加 jdk 和 jre 相关配置。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    //------------------------ Java 相关 ------------------------
    // 如果配置的 java.home 版本低于 11,VS CODE 会提示用户安装 java 11 或以上版本的 JDK。
    "java.home": "C:\\Users\\fsun7\\soft\\Java\\jdk-11",
    "java.configuration.runtimes": [
    {
    "name": "JavaSE-1.8",
    "path": "C:\\Users\\fsun7\\soft\\Java\\jdk1.8.0_202",
    "default": true
    },
    {
    "name": "JavaSE-11",
    "path": "C:\\Users\\fsun7\\soft\\Java\\jdk-11",
    },
    ],
    "files.exclude": {
    "**/.classpath": true,
    "**/.project": true,
    "**/.settings": true,
    "**/.factorypath": true
    },
    // 配置 lombok
    "java.jdt.ls.vmargs": "-noverify -Xmx1G -XX:+UseG1GC -XX:+UseStringDeduplication -Dfile.encoding=UTF-8 -javaagent:\"c:\\Users\\fsun7\\.vscode\\extensions\\gabrielbb.vscode-lombok-1.0.1\\server\\lombok.jar\"",

pom.xml 配置

  • pom.xml 配置

    1
    2
    3
    4
    5
    <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <maven.compiler.source>1.8</maven.compiler.source>
    <maven.compiler.target>1.8</maven.compiler.target>
    </properties>

使用 Junit5

  • 在 view 下的 Testing 下可以看到所有的测试方法

  • 终端右键可以看到 debug console

  • 依赖如下

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
      <properties>
    <junit.version>5.4.2</junit.version>
    </properties>

    <!-- <dependency>
    <groupId>junit</groupId>
    <artifactId>junit</artifactId>
    <version>4.11</version>
    <scope>test</scope>
    </dependency> -->
    <dependency>
    <groupId>org.junit.jupiter</groupId>
    <artifactId>junit-jupiter-api</artifactId>
    <version>${junit.version}</version>
    <scope>test</scope>
    </dependency>
    <dependency>
    <groupId>org.junit.jupiter</groupId>
    <artifactId>junit-jupiter-engine</artifactId>
    <version>${junit.version}</version>
    <scope>test</scope>
    </dependency>
  • 测试文件如下,

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    package pers.fulsun;

    import static org.junit.jupiter.api.Assertions.assertTrue;

    import org.junit.jupiter.api.Test;

    public class AppTest {
    /**
    * Rigorous Test :-)
    */
    @Test
    public void shouldAnswerWithTrue() {
    assertTrue(true);
    }

    @Test
    public void testMain() {
    System.out.println("hello world");
    }
    }

使用 lombok&logback

依赖文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<maven.compiler.source>1.8</maven.compiler.source>
<maven.compiler.target>1.8</maven.compiler.target>
<slf4j.version>1.7.25</slf4j.version>
<logback.version>1.2.3</logback.version>
<lombok.version>1.18.20</lombok.version>
</properties>

<dependencies>
<!-- lombok -->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>${lombok.version}</version>
</dependency>

<!-- 日志处理 -->
<!-- https://mvnrepository.com/artifact/org.slf4j/slf4j-api -->
<dependency>
<groupId>org.slf4j</groupId>
<artifactId>slf4j-api</artifactId>
<version>${slf4j.version}</version>
</dependency>
<dependency>
<groupId>ch.qos.logback</groupId>
<artifactId>logback-core</artifactId>
<version>${logback.version}</version>
</dependency>
<dependency>
<groupId>ch.qos.logback</groupId>
<artifactId>logback-classic</artifactId>
<version>${logback.version}</version>
</dependency>
<dependency>
<groupId>ch.qos.logback</groupId>
<artifactId>logback-access</artifactId>
<version>${logback.version}</version>
</dependency>
</dependencies>

配置 logback

  • resources 资源目录下创建文件 logback.xml, 文件内容如下

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    <?xml version="1.0" encoding="UTF-8"?>
    <configuration scan="true" scanPeriod="60 seconds" debug="false">
    <contextName>Automaion</contextName>
    <property name="log.path" value="log" />
    <!-- 日志最大的历史 15 天 -->
    <property name="log.maxHistory" value="15" />
    <property name="log.colorPattern" value="%d{yyyy-MM-dd HH:mm:ss.SSS} | %highlight(%-5level) | %boldYellow(%thread) | %boldGreen(%logger) | %msg%n" />
    <property name="log.pattern" value="%d{yyyy-MM-dd HH:mm:ss.SSS} %contextName [%thread] %-5level %logger{36} - %msg%n" />

    <!--输出到控制台-->
    <appender name="console" class="ch.qos.logback.core.ConsoleAppender">
    <encoder>
    <pattern>${log.colorPattern}</pattern>
    </encoder>
    </appender>

    <!--输出到文件-->
    <appender name="file_info" class="ch.qos.logback.core.rolling.RollingFileAppender">
    <rollingPolicy class="ch.qos.logback.core.rolling.TimeBasedRollingPolicy">
    <fileNamePattern>${log.path}/info/info.%d{yyyy-MM-dd}.log</fileNamePattern>
    <MaxHistory>${log.maxHistory}</MaxHistory>
    </rollingPolicy>
    <encoder>
    <pattern>${log.pattern}</pattern>
    </encoder>
    <filter class="ch.qos.logback.classic.filter.LevelFilter">
    <level>INFO</level>
    <onMatch>ACCEPT</onMatch>
    <onMismatch>DENY</onMismatch>
    </filter>
    </appender>

    <appender name="file_error" class="ch.qos.logback.core.rolling.RollingFileAppender">
    <rollingPolicy class="ch.qos.logback.core.rolling.TimeBasedRollingPolicy">
    <fileNamePattern>${log.path}/error/error.%d{yyyy-MM-dd}.log</fileNamePattern>
    </rollingPolicy>
    <encoder>
    <pattern>${log.pattern}</pattern>
    </encoder>
    <filter class="ch.qos.logback.classic.filter.LevelFilter">
    <level>ERROR</level>
    <onMatch>ACCEPT</onMatch>
    <onMismatch>DENY</onMismatch>
    </filter>
    </appender>

    <root level="DEBUG">
    <appender-ref ref="console" />
    <appender-ref ref="file_info" />
    <appender-ref ref="file_error" />
    </root>

    </configuration>

简单使用

  • 写一个类测试

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    @Slf4j
    public class App {
    public static void main(String[] args) {
    System.out.println("Hello World!");
    log.trace("trace");
    log.info("----info----");
    log.warn("----warn----");
    log.error("----error----");
    log.debug("----debug----");
    }
    }
  • 右键或者右上角运行后,可以在项目下发现 log 文件夹和对应日期的日志文件

Python环境

  • 修改pip镜像源

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    #~/pip/pip.ini
    [global]
    timeout=60
    index-url=https://pypi.tuna.tsinghua.edu.cn/simple/
    extra-index-url=
    http://mirrors.aliyun.com/pypi/simple/
    http://pypi.douban.com/simple
    http://pypi.mirrors.ustc.edu.cn/simple/

    [install]
    trusted-host=
    pypi.tuna.tsinghua.edu.cn
    mirrors.aliyun.com
    pypi.douban.com
    pypi.mirrors.ustc.edu.cn