【vscode】常用插件使用+快捷键

作者: 小棨 | 来源:发表于2021-08-30 08:30 被阅读0次

VS Code
vscode代码注释插件
2020-07-07 vscode常用插件及快捷键整理
vscode常用插件
VScode 使用经验小结
【vscode】常用插件使用+快捷键
vscode常用插件
Windows和VsCode常用快捷键
atom插件及快捷键（前端向）
VSCode常用插件

推荐常用插件

插件配置文件：找到"文件" -> "首选项" -> "设置"(或者： File->Preferences->Settings )，点击右上角，切换到setting.json配置文件

1.【软件】VSCode汉化，语言切换请查看下图使用方法：

2.【软件】文件头部注释和函数注释:

(其他功能自行了解)~~~字段配置链接：官网链接

// 头部注释 --VSCode>setting.文件
"fileheader.customMade": {
    // 头部注释默认字段
    "Author": "your name",
    "Date": "Do not edit", // 设置后默认设置文件生成时间
    "LastEditTime": "Do not edit", // 设置后，保存文件更改默认更新最后编辑时间
    "LastEditors": "your name", // 设置后，保存文件更改默认更新最后编辑人
    "Description": "",
    "FilePath": "Do not edit", // 设置后，默认生成文件相对于项目的路径
    "custom_string_obkoro1": "可以输入预定的版权声明、个性签名、空行等"
},
// 函数注释
"fileheader.cursorMode": {
  // 默认字段
  "description":"",
  "param":"",
  "return":""
},

3.【前端】质量提示&错误，vscode代码自动格式化成eslint风格的代码，并且支持在html和vue中的代码

4.【前端】语法高亮, 质量提示&错误、格式化/风格、智能提示等。

特性：Vetur只支持整个文档格式化, 不支持选中某个片段格式化。
vetur官网链接,默认配置如下图（可以自定义）：

prettier: For css/scss/less/js/ts.
prettyhtml: For html.
stylus-supremacy: For stylus.
vscode-typescript: For js/ts. The same js/ts formatter for VS Code.
sass-formatter: For the .sass section of the files.

5.【前端】格式化/风格

  // VSCode>setting.文件 自定义格式化风格（可以根据个人习惯更改）
 // vscode默认启用了根据文件类型自动设置tabsize的选项
    "editor.detectIndentation": false,
    // 重新设定tabsize
    "editor.tabSize": 2,
    // #每次保存的时候自动格式化
    "editor.formatOnSave": true,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue"
    ],
    // #每次保存的时候将代码按eslint格式进行修复
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    //  #让prettier使用eslint的代码格式进行校验
    "prettier.eslintIntegration": true,
    //  #去掉代码结尾的分号
    "prettier.semi": false,
    //  #使用带引号替代双引号
    "prettier.singleQuote": true,
    //  #让函数(名)和后面的括号之间加个空格
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    // #让vue中的js按编辑器自带的ts格式进行格式化
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "force-aligned"
            // #vue组件中html代码格式化样式
        }
    },
  // #让vue中的js按编辑器自带的ts格式进行格式化
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "force-aligned"
            // #vue组件中html代码格式化样式
        }
    },
  // 工作区位置
  "workbench.sideBar.location": "left",
  // 工作区缩放级别
  "window.zoomLevel": 0,
"[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  }