Vscode開發前後端

https://code.visualstudio.com/docs/?dv=win

軟件漢化

正在上傳…重新上傳取消

插件下載（插件和快捷鍵可以參考下面的文章）

參考文章：https://blog.csdn.net/weixin_45601379/article/details/100550421

所有插件從下面的插件商店進行下載，根據個人需要下載相關的插件，具體下載安裝方式如下1

正在上傳…重新上傳取消

1.文件類型一目瞭然插件vscode-icons

插件商店搜索 vscode-icons，進行下載安裝

轉存失敗重新上傳取消

2.自動格式化代碼插件

Beautify(格式化html,js,css)

3.自動閉合HTML/XML標籤插件

Auto Close Tag

4.自動完成另一側標籤的同步修改插件

Auto Rename Tag

5.給括號加上不同的顏色，便於區分不同的區塊

Bracket Pair Colorizer

6.映射vscode上的斷點到chrome上，方便調試

Debugger for Chrome

7.js語法糾錯，可以自定義配置

ESLint

8.方便查看git日誌

GitLens

9.智能提示CSS類名以及id

HTML CSS Support

10. 智能提示HTML標籤，以及標籤含義

HTML Snippets

11. ES6語法智能提示，以及快速輸入

JavaScript(ES6) code snippets

12. jQuery代碼智能提示

jQuery Code Snippets

13. 實時預覽markdown

Markdown Preview Enhanced

14. markdown語法糾錯

Markdownlint

15. vscode圖標主題

Material Icon Theme

16. 圖標字體

Icon fonts

17. 右鍵快速在瀏覽器中打開html文件

open in browser

18. 自動提示文件路徑

Path Intellisense

19. Vue多功能集成插件，錯誤提示等

Vetur

20. 智能提示HTML class =“”屬性

Class autocomplete for HTML

21. require 時的包提示

npm Intellisense

22. ⼀鍵搭建各類語⾔言的學習測試環境

Code Runner

23. Chrome 聯動調試

Debugger for Chrome

四、常見問題

前端開發常見問題

進行前端開發，需要自定義html5和vue模板

1.VScode自定義html5模板

參考文章：https://www.cnblogs.com/wgyhon/p/11466449.html

轉存失敗重新上傳 取消

打開html.json,粘貼下面的代碼至原大括號中

"h5 template": {

"prefix": "vh", // 對應的是使用這個模板的快捷鍵

"body": [

"<!DOCTYPE html>",

"<html lang=\"en\">",

"<head>",

"\t<meta charset=\"UTF-8\">",

"\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",

"\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",

"\t<title>Document</title>",

"\t<script src=\"./lib/vue-2.4.0.js\"></script>",

"</head>\n",

"<body>",

"\t<div id =\"app\"> </div>\n",

"\t<script>",

"\t //創建Vue實例,得到 ViewModel",

"\t var vm = new Vue({",

"\t\tel: '#app',",

"\t\tdata: {},",

"\t\tmethods: {}",

"\t });",

"\t</script>",

"</body>\n",

"</html>"

"description": "HT-H5" // 模板的描述

}

舉例：新建一個html文件，輸入“!”按tab鍵，模板代碼就出來了

轉存失敗重新上傳 取消

新建好之後，在頁面輸入“!”,敲回車

正在上傳…重新上傳 取消

2.VSCode自定義vue模板

參考文章：https://blog.csdn.net/m_uncle/article/details/80428542

安裝VueHelper插件，安裝後重啓一下vscode

如前面的自定義html模板一樣，打開vue.json,複製下面的代碼

{

"Print to console": {

"prefix": "vue",

"body": [

"<template>",

" <div>\n",

" </div>",

"</template>\n",

"<script>",

" export default {",

" data () {",

" return {\n",

" }",

" },",

" components: {\n",

" }",

"</script>\n",

"<style>\n",

" ",

"</style>",

"$2"

],

"description": "Log output to console"

}

新建一個vue文件，輸入vue按tab鍵，模板代碼就出來了

後端常見問題

前置檢查:電腦環境變量是否配置好java和maven

轉存失敗重新上傳 取消

一、Java開發必備插件

Language Support for Java(TM) by Red Hat
Debugger for Java
Java Test Runner
Maven for Java
Java Dependency Viewer
Java Extension Pack

Java開發可選插件

推薦插件

Eclipse Keymap for Visual Studio Code. (eclipse快捷鍵，eclipse用戶最愛)
Lombok Annotations Support for VS Code. (簡化POJO，很驚喜)

二、配置maven,jdk

進入方式一:

轉存失敗重新上傳 取消

進入方式二:

文件——首選項——設置

轉存失敗重新上傳 取消

轉存失敗重新上傳取消

"java.home": "D:/ServiceFamily/JDK-2019/jdk1.8",

"maven.executable.path": "D:/ServiceFamily/apache-maven/apache-maven-3.5.2/bin/mvn",

"java.configuration.maven.userSettings": "D:/ServiceFamily/apache-maven/apache-maven-3.5.2/conf/settings.xml",

"maven.terminal.customEnv": [

{

"environmentVariable": "JAVA_HOME",

"value": "D:/ServiceFamily/JDK-2019/jdk1.8",

}

VSCode創建Springboot項目

參考文章：https://www.cnblogs.com/miskis/p/9816135.html

五．VSCode Svn配置

https://blog.csdn.net/chpswg/article/details/98172212?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task

打開Vscode,在擴展處搜索svn，選擇第一個，點擊安裝

轉存失敗重新上傳取消

打開Vscode底部的設置，然後搜索svn，點擊在 setting.json中編輯

轉存失敗重新上傳取消

在彈出的編輯窗口中輸入svn的位置："svn.path": "D://SoftWare//Tortorise//bin"（注意這裏是Tortorise的安裝後bin的位置

轉存失敗重新上傳取消

關閉Vscode，重新打開，svn安裝生效

ctrl+shift+p,在彈出的地址欄中選擇SVN:Checkout,輸入想要檢出svn的svn共享地址：

六、解決無代碼提示問題

https://blog.csdn.net/qq_37162688/article/details/90517963

轉存失敗重新上傳取消

VSCode啓動Springboot項目

轉存失敗重新上傳取消

給java文件添加註釋

https://blog.csdn.net/D_claus/article/details/85243454

在setting.json文件裏添加下面的註釋

//配置新建文件註釋和方法註釋

"fileheader.configObj": {

"createFileTime": true,//設置爲true則爲文件新建時候作爲date，否則註釋生成時間爲date

"autoAdd": true,//自動生成註釋，老是忘記的同學可以設置

"annotationStr": {

"head": "/*",

"middle": " * @",

"end": " */",

"use": true//設置自定義註釋可用

"headInsertLine": {

"php": 2

}

"fileheader.cursorMode": {

"description":"",

"param ":"",

"return":""

"fileheader.customMade": {

"Description":"" ,//文件內容描述

"Author":"心書",//編輯人

"Date": "Do not edit",//時間

"LastEditTime": "Do not edit",

"LastEditors": "心書",

}

Svn提交代碼忽略文件

正在上傳…重新上傳取消

查看快捷鍵

轉存失敗重新上傳取消

在setting.json配置新建類作者註釋信息

//配置新建文件註釋和方法註釋

"fileheader.configObj": {

"createFileTime": true,//設置爲true則爲文件新建時候作爲date，否則註釋生成時間爲date

"autoAdd": false,//自動生成註釋，老是忘記的同學可以設置

"annotationStr": {

"head": "/*",

"middle": " * @",

"end": " */",

"use": true//設置自定義註釋可用

"headInsertLine": {

"php": 2

}

"fileheader.cursorMode": {

"description":"",

"param ":"",

"return":""

"fileheader.customMade": {

"Description":"" ,//文件內容描述

"Author":"心書",//編輯人

"Date": "Do not edit",//時間

"LastEditTime": "Do not edit",

"LastEditors": "心書",

}

Vscode自動導包提示：Shift+Alt+O 自動導入包

Vscode+Java配置與使用https://blog.csdn.net/antony1776/article/details/80298326?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task