Vscode简单使用

https://code.visualstudio.com/docs
https://github.com/Microsoft/vscode

2018.4.25 星期三 17:00

## WHY
编辑器，但区别于一般的编辑器和集成工具。
1. 轻量，根据情况自己添加插件；插件足够满足需求
2. 免费，不用破解/注册。
3. 支持不同操作系统。
4. 生态成熟且不断成长。

## 基本
界面中菜单,侧边栏,包括资源管理器,搜索,源码管理等都可以控制是否显示
### 设置
用户设置，json文件：对象最后一个不能有,
文件夹没有设置过

可以选择风格，字体大小等等

用户设置

{
    "editor.fontSize": 18,
    "editor.tabSize": 2,
    "files.autoSave": "afterDelay",
    "workbench.startupEditor": "newUntitledFile",
    
    "liveServer.settings.donotShowInfoMsg": true,
    "liveServer.settings.port": 0,

    "git.path": "D:/Program Files/Git/bin/git.exe",
    "git.autorefresh": false,
    "git.enabled": true,
}

#### 文件排除
files.exclude 排除文件夹，不能使用!
比如pages/, 但是要保留某一个文件夹。可以通过`pages/[^o]实现。|也不能用?? 或许使用方式不对/wxa(pp|-build)/

正则表达式测试没有问题

#### 尾空格
files.trimTrailingWhitespace 

但是并没有生效。尾空格，还是在保存的时候自动删除了<!-- 历史原因的一些空格不能去掉，后期要diff 不好merge -->。
原来是.editorconfig 生效了<!-- 有插件 -->。


### 快捷键
<!-- 只改了

ctrl+D

。查找/设置方便      -->

插件也会修改默认快捷键；比如：md-all-in-one

ctrl+B

(默认是折叠/打开侧边栏)等。     
有时候不作用，可能是因为插件没有加载成功。      
md-all-in-one 删除线快捷(A+s)键冲突了,重新设置就好了   
C+S+b 中文输入法:表情选择输入; 英文:nsis 编译   


C + P: 打开输入行
C + G: 跳到指定行   输入行中是 : lineNum
C + J : 切换控制面板
C +

: 打开/切换终端 // 默认终端可以自定义，vscode自带默认的是powershell

F5 运行当前选择配置项；如果没有会自动选择新建
C + S + P: 打开命令行：输入行中是 > cmd
Debug: Start Without Debugging
Debug: Select and Start Debugging
// 如果取消注释，鼠标 hover 会有说明
// 添加一个新的配置，下面也会list 可配置字段

#### Local History
恢复删除的文件

#### 重启指令
重启：打开：“命令面板”（CTRL + SHITF + P）输入：> Reload Window
也可以绑定快捷键

{
  "key": "ctrl+f5",
  "command": "workbench.action.reloadWindow",
  "when": "editorTextFocus"
}

默认的when 是 isDevelopment

shift+option+鼠标单击：光标范围选中
### 编辑

### 多个编辑器/窗口
可以侧边栏/liveView。
可以在”查看–》编辑器布局中”中选择设置

查看中还可以设置：
切换呈现空格：可以在python/markdown中编辑中显示缩进是空格还是制表符/或者空格数量——以控制换行
在编辑器最下面会显示当前状态，单击“空格”状态可以在编辑器命令(F1)中选择切换/转换当前格式
切换自动换行：
切换小地图：

### 工作区
不同文件夹可以放到一个工作区。
还可以进行设置，排除文件等。

### 搜索
支持正则模式，include/exclude

### 索引/相关
$_FIXME: 在php中写的js找不到索引/相关
> php-intellisense:https://github.com/felixfbecker/vscode-php-intellisense/issues/158

### 文本比较
插件支持:Partial Diff

### 源代码管理
需配好git路径
push也需要配置: [git操作.md]#vscode 配置git/ssh

配合插件：Git History, Perforce for VS Code(不知道什么用)
禁用: Hg， Visual Studio Team Services （没有实用）

### 调试
Debugger for Chrome
TODO: attach方式都失败了，目前可以node的launch 调试js
一些参考链接：
https://github.com/Microsoft/vscode-chrome-debug/issues/111
https://github.com/Microsoft/vscode-chrome-debug
https://chromedevtools.github.io/devtools-protocol/

https://code.visualstudio.com/Docs/editor/debugging

chrome://inspect/#devices

.\vscode\launch.json文件

{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",

    // 可以同时开启多个调试
    "configurations": [
        // ## 4 node attach
        {
            "type": "node",
            "request": "attach",
            "name": "Attach by Process ID",
            // "processId": "${command:PickProcess}"
            "processId": "7244"
        },
        // ## 3 node launch 
        {
            "type": "node",
            "request": "launch",
            "name": "Launch nodejs",
            "program": "${workspaceFolder}/app.js",
            // url/file:"",// not allowed
            
            // 指定 运行时可执行文件（v8） 失败；还有一个可以执行的配置值是 npm,需要查看怎么使用  
            // "runtimeExecutable": "node"  //  加上这个配置还出错了: bad option: --inspect-brk=26759; 显然也不能指定chrome/v8
            // "runtimeExecutable": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe"
                // "userDataDir" // not allowed
        },
        // ## 2 chrome: attach
            /* 失败，即使设置了 `--remote-debugging-port   ` */
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 9222,
            "url":"http://127.0.0.1:51394/debugger.html", // method 2 server ;
            // file // not allowed
            // "userDataDir": // not allowed
            "webRoot": "${workspaceFolder}"
        },

        // ## 1 chrome: launch
        {
            "type": "chrome",
            "request": "launch",  // launch 每次调试都会新启动一个chrome窗口，开启调试。已经打开的不会进入调试
            "name": "Launch Chrome html",
            
            "file":"${workspaceFolder}/debugger.html", // method 1: file
            // "url":"http://127.0.0.1:61475/debugger.html", // method 2 server：如果没有server是不会打开页面，进入调试的

            // "url":"http://127.0.0.1:61475/", // 不正确的打开方式；debugger后打开的是根目录，没有debugger的目标
            // "file":"${workspaceFolder}/debugger.js", // 不正确的打开方式：debugger后打开js文件（浏览器打开js的效果），也没有进入调试
                // 直接调试js，需要 node 非 chrome

            // "runtimeExecutable": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe", // 改成您的 Chrome 安装路径
            // "userDataDir": true, // 如果出现上面 runtimeExecutable 字段，这里需要配置

            // "sourceMaps": true,
            "webRoot": "${workspaceFolder}"
        }
    ]
}

### terminal
把shell设置为bash

// @sync os=windows
"terminal.integrated.profiles.windows": {
    "gitBashShell": {
        // "path": "C:\windows\System32\cmd.exe",
        "path": "D:\\Program Files\\Git\\git-bash.exe",
        // "args": [
        //     "-noexit",
        // ]
    }
},
// @sync os=windows
// "terminal.integrated.defaultProfile.windows": "gitBashShell",

PS: 但是打开的是bash的独立窗口，不在vscode 界面。所以又给关了。
不知道什么原因，暂不去排查问题。

修改默认的shell：https://code.visualstudio.com/docs/editor/integrated-terminal#_terminal-profiles
Troubleshoot Terminal launch failures

## 插件
Date & Time,Active File In StatusBar
vscode-author-generator,File Header Comment
TODO Hightlight
SFTP
evermonkey
### HCJ
用的不多(目前)
minify, Beautify ,HTMLHint,ESlint,
Debugger for Chrome,
Live Server,
Autoprefixer, css-minify, css-triggers,

以下为现在实用
HTML CSS Support,IntelliSense for class names in HTML,
Auto Close Tag, Auto Rename Tag,
Path Autocomplete,
Image preview,

Color Hightlight, Color Info($_PS: 注释掉的才会显示,应该和某个冲突了),

Easy LESS , Less IntelliSense,

禁用
Live Server Preview, Open HTML in Default Browser, open-in-browser,
HTML Boilerplate, HTML Class Suggestions, CSS Auto Prefix, jshint
Quokka.js

### eslint
保存的时候自动修复。

"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
},
// 默认javascript，javascriptreact
// "eslint.validate": [
    //     "javascript",
    //     "javascriptreact",
    //     "typescript",
    //     "typescriptreact",
    //     "vue",
    //     "html",
    //   ],

### git
默认的Git.

Git History: View git log, file history, compare branches or commits。

Git History Diff： View git history. View commit details. View diff of committed files. View git blame info. View stash details.
> GitHD aims to bring the most useful git history inside with the simplest and the most convenient way.

### JSDoc
原始功能。
$_NOTE: 只有js文件中会自动添加；其他（php）是多行注释，不会自动@param等

### markdown
Markdown All in One,Markdown PDF,Markdown TOC
markdownlint没有安装

主要使用md-all-in-on
toc没有多余toc标签；中文没有链接；也不可以跳转。

利用md-toc能够生成可以链接/跳转的目录。

#### 字体
可以设置预览的字体Markdown › Preview: Font Family。比如公司要求的特殊字体。
#### 样
可以单独在md文件中，写特殊格式的样式，比如邮箱格式。
也可以在插件中配置css文件路径。

### php
PHP IntelliSense, PHP Intelephense, PHP Debug, PHP Extension Pack,

PS: 后面几个没有具体看干什么用的

### 命令行打开-code
Visual Studio Code的扩展工具菜单中有Install command line的快捷安装

运行 VS code并打开命令面板（ ⇧⌘P ）也就是（shift+command+p），然后输入 shell command 找到: Install ‘code’ command in PATH ，点击安装就行了。

### 文件编译
Sass/Less/Stylus/Pug/Jade/Typescript/Javascript Compile Hero Pro
🚀Easy to compile ts, tsx, scss, less, stylus, jade, pug and es6+ on save without using a build task.

537,568 - 44

Live Sass Compiler
Compile Sass or Scss to CSS at realtime with live browser reload.
1,967,898 - (198)

### 其他
Swig

## Issues
1. 有时保存出现提示。可能同时文件在其他地方更改了，关闭当前标签页再重新打开，不必重启编辑器
2. 有时按键失灵，比如backspce，enter。有可能是因为扩展宿主–插件出错，因为出错重启之后就好了。或者重启编辑器。
VS(Visual Studio)按键失灵无法按回车
3. 插件有时无法正确加载，比如快捷键或功能失效。(可在帮助->切换开发人员工具查看错误)
4. 搜索 inclued/exclude 按照正常的方式工作
Make files to include/exclude configurable on whether to use 1 or 2 inputs
5. vscode.exe 没有反应，重新装了一次就好了

20:04