玩转vscode(完善中)

官网

vscode

快捷键

f1/Ctrl+Shift+P: 命令面板
Ctrl+U: 回到上一个光标的位置
按shift键+鼠标：连续选中多行文本
shift 键搭配方向键/home/end: 连续选中多行文本
ctrl+Shift+K：删除
alt+上下键：移动上下一行
shift+alt+上下键:向上下复制一行
Alt+Shift+F: 格式化
Alt+Shift+i：选中多行代码，按下，每一行后面都会多出来一个光标
Ctrl+P：快速打开文件（输入文件名，后对面加上 “:”和指定行号即可跳转对应行）
Ctrl+G：跳转对应行
Ctrl+Enter: 向下新建空白行
ctrl+shift+enter: 向上新建空白行
ctrl+tab: 文件跳转
Ctrl + Shift + T: 重新打开一个关闭的页面
Ctrl + `: 可以打开或关闭终端
Ctrl + Backspace: 删除前一个单词

命令面板

ctrl+shift+p 打开命令面板

简单命令：

Configure User Snippets  // code snippet(代码片段)
setting  // 配置项

命令行

cmd输入命令：

code --help
code . : 快速打开vscode

配置

CMD + ,  // 打开settings

搜索format，你会看到很多默认的格式化配置项。
你可以进行更改配置，当然，有些配置项是装好插件才会出来的。

用户配置

{
    // 编辑器
    "editor.suggestSelection": "first",
    "editor.renderControlCharacters": true,
    "editor.multiCursorModifier": "ctrlCmd",
    "editor.snippetSuggestions": "top",
    "editor.renderWhitespace": "all",
    "editor.formatOnPaste": true,
    "editor.wordWrap": "on",
    "editor.fontSize": 12,
    "editor.tabSize": 2,

    // 文件资源管理
    "explorer.confirmDragAndDrop": false,
    "explorer.confirmDelete": false,

    // 终端
    "terminal.integrated.cursorBlinking": true,
    "terminal.integrated.rendererType": "dom",
    "terminal.integrated.cursorStyle": "line",

    // 文件
    "files.insertFinalNewline": true,
    "files.eol": "\n",
    "files.associations": {
        "*.vue": "vue",
        "*.wxss": "css",
        "*.cjson": "jsonc",
        "*.wxs": "javascript"
    },

    // 窗口
    "window.zoomLevel": 0,

    // vetur
    "vetur.format.defaultFormatter.js": "vscode-typescript", // 让vue中的js按编辑器自带的ts格式进行格式化
    "vetur.format.defaultFormatter.ts": "vscode-typescript",
    "vetur.format.options.tabSize": 2,
    "vetur.validation.template": false,
    "vetur.format.defaultFormatter.html": "js-beautify-html",  //.vue文件template格式化支持，并使用js-beautify-html插件(因为prettier不能格式化vue文件template)
    "vetur.format.defaultFormatterOptions": { 
        // js-beautify-html格式化配置，属性强制换行
        "js-beautify-html": { 
            "wrap_attributes": "force-aligned"
        }
    }, 

    // prettier 
    "prettier.eslintIntegration": true, // 让prettier使用eslint的代码格式进行校验
    "prettier.singleQuote": true,

    // eslint
    "eslint.autoFixOnSave": true, // 每次保存的时候将代码按eslint格式进行修复
    "editor.tabSize": 2,  
    "editor.formatOnSave": true, // 每次保存的时候自动格式化
    "eslint.validate": [ 
        "javascript", 
        "javascriptreact",
        { 
            "language": "vue", 
            "autoFix": true 
        }
    ]
}

若想工程中保持统一化，可以在工程下新建文件夹.vscode，将settings.json放入。

插件

离线安装插件

// vscode bin目录下打开cmd
code --install-extension <插件名>.vsix

插件下载

vscode plugin

常用插件

1. vscode-icons
2. Auto Rename Tag
3. Auto Import: 自动引入文件
4. Add jsdoc comments: 生成代码注释
5. GitLens: 查看代码的版本、提交人等
6. Editorconfig
7. Code Spell Checker: 检测写代码时错词
8. Markdown All in One
9. Nest Comments: 遇到过需要注释一段代码里面有注释？
10. Project Manager: 在多个项目切换

代码规范化

1. eSLint
2. Prettier
3. tslint

vue相关插件

1. vetur

小程序

1. wxml
2. vscode wxml
3. minapp