玩轉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