VS-Code之常用插件及常用技巧

总结一些个人常用的vs code的常用插件及常用技巧，让你不再为选择和使用编辑器而浪费时间

创建自己的工作区

vs-code提供了工作区的功能，为你的项目创建工作区，然后在工作区文件setting对象内添加如下设置

注意：以下配置是基于接下来介绍的插件设置的，如果没有安装插件是不会有任何效果的哦

{
    // 換行
    "editor.wordWrap": "on",
    // 代码缩进修改成2个空格
    "editor.tabSize": 2,
    // 不檢查縮進，保存后統一按設置項來設置
    "editor.detectIndentation": false,
    //保存的时候自动格式化
    "editor.formatOnSave": true,
    // 字體大小
    "editor.fontSize": 16,
    // 設置行高
    "editor.lineHeight": 24,

    // 主題
    "workbench.colorTheme": "Visual Studio Light",
    // 左側工具欄是否可見
    "workbench.activityBar.visible": true,

    // 控制何时自动保存已更新文件。接受的值: "off"、"afterDelay"、"onFocusChange" (编辑器失去焦点)、"onWindowChange" (窗口失去焦点)。如果设置为 "afterDelay"，可在 "files.autoSaveDelay" 中配置延迟时间。
    "files.autoSave": "onWindowChange",
    // "files.autoSaveDelay": 3000,

    // 让prettier使用eslint的代码格式进行校验
    "prettier.eslintIntegration": true,
    // 去掉代码结尾的分号
    "prettier.semi": true,
    // 使用带引号替代双引号
    "prettier.singleQuote": true,

    // 启用后，按下 TAB 键，将展开 Emmet 缩写。
    "emmet.triggerExpansionOnTab": true,

    // js設置單引號
    "javascript.preferences.quoteStyle": "single",
    // 让函数(名)和后面的括号之间加个空格
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    // html格式化
    "vetur.format.defaultFormatter.html": "js-beautify-html",

    // 使用eslint 風格使用standard 進行代碼規則限制
    "eslint.autoFixOnSave": true,
    "eslint.validate": [
    "javascript",
    {
        "language": "vue",
        "autoFix": true
        },
        "html",
        "vue"
    ],

    //自动保存信息
    // By default, create file  username
    "fileheader.Author": "you name",
    // By default, update file  username.
    "fileheader.LastModifiedBy": "you name",
    // By default, common template. Do not modify it!!!!!
    "fileheader.tpl": "/*\r\n * @Author: {author}\n * @Date: {createTime}\n * @Last Modified by: {lastModifiedBy}\n * @Last Modified time: {updateTime}\n */\n",

    // vue组件中html代码格式化样式
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "force-aligned"
        }
    }
}
复制代码

常用插件介绍

自动补全

1. Auto Close Tag ：自动闭合 html 等标签 （）
2. Auto Rename Tag ：修改 html 标签时，自动修改闭合标签。
3. Path Intellisense ：自动提示补全路径。
4. Emmet ：大家应该很熟悉这个插件了（很好用），VS Code 已经内置了，很到位。

代码检查

1. ESLint ：检查 js 语法规范，你可以使用不同的规范，如 airbnb 、standard 、google。
2. TSLint ：检查 typescript 语法规范。
3. Stylelint ：检查 CSS/SCSS/Less 语法规范。
4. Markdownlint ：检查 markdown 语法规范。

代码格式化

1. Prettier ：让你的代码看起来更整洁，需要配置，稍后会说到配置

代码注释

1. Document This ：可以给函数、类等自动的加上详细的注释。
2. vscode-fileheader : 为文档自己生成作者信息，及每次修改后记录最后修改时间

常用技巧介绍

快捷键

常用的快捷键就不一一列出来啦，列一些有用但你不一定知道的

• alt + click 可选定多处进行多光标编辑，这个对于要同时编辑多个地方，但又不能使用全局替换的时候非常有用
• ctrl + shift + 方向键 按单词选择区域，shift + 方向键只能一个一个字母的选择，当你想选择一个单词时，这个快捷键非常棒
• ctrl + enter向下插一行
• ctrl + shift + enter向上插一行
• shift + alt + 右方向键 选择当前代码块，再按一下选择包涵当前的上一层代码，加左方向键是反选
• alt + 方向键向上或向下移动所选代码行
• ctrl + shift + k删除当前行，但总觉得按得有点多，个人喜欢用ctrl + x，哈哈~~
• ctrl + k 、ctrl + 0折叠所有代码块
• ctrl + k 、ctrl + j展开所有代码块
• ctrl + g 跳到指定行
• ctrl + k 、ctrl + s搜索对应快捷键绑定