玩转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+p 打开命令面板

简单命令：

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

命令行

cmd输入命令：

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

配置

VS Code 的工做空间设置位于settings.json中。

CMD + ,  // 打开 settings.json 快捷键

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

用户配置

{
    // 全局编辑器层面
    "workbench.colorTheme": "One Monokai",
    "workbench.settings.editor": "json",
    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
    // diff 时忽略空格
    "diffEditor.ignoreTrimWhitespace": true,
    // sublime 按 tab 自动补全 tag
    "auto-close-tag.SublimeText3Mode": true,

    // 编辑器
    "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,
    "prettier.eslintIntegration": true,

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

插件

离线安装插件

// 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 查看代码的版本、提交人等

代码规范化

1. ESLint
2. Prettier

vue相关插件

1. vetur