VSCode所必须要知道的

 一.关于VSCode的设置需要配置的内容,即setting.json中的配置内容:

{
    "window.zoomLevel": 1, // 编辑器视图缩放
    // editor start
    "editor.tabSize": 2, // 一个tab符号等于2个空格
    "editor.formatOnType": true, // 输入一行后自动格式化
    "editor.formatOnSave": true, // 复制后自动格式化
    "editor.rulers": [
        100
    ], //标尺100个字符
    "editor.wordWrap": "bounded", // 折行方式
    "editor.wordWrapColumn": 120, // 100字后折行显示
    "editor.snippetSuggestions": "top", //显示代码建议的位置top
    "editor.tabCompletion": "on", // tab键自动补全代码
    "editor.acceptSuggestionOnEnter": "on", // enter键自动补全代码
    // editor end
    // eslint start
    "eslint.options": {
        "plugins": [
            "html"
        ]
    }, // eslint html插件
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue"
    ], // eslint检测的文件类型
    "eslint.alwaysShowStatus": true, // 是否总是显示eslint状态    
    // eslint end
    "fileheader.customMade": {
        "Author": "wh", // 文件自动头部,作者
        "Date": "Do not edit", // 日期,不需要改
        "LastEditors": "wh", // 最后编辑者,同作者
        "LastEditTime": "Do not edit", // 最后修改日期,不需要改
        "Description": "null" // 描述
    },
    "npm.registry": "http://maven.paic.com.cn/repository/npm/", // npm仓库
    "terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe", // 终端
    "markdown-pdf.executablePath": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe", // markdown-pdf浏览器引擎
    "vetur.format.defaultFormatter.js": "vscode-typescript", // vue默认格式化风格,需要配个插件vue-beautify
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true, // 方法名和()之前加空格
    "[markdown]": {
        "editor.quickSuggestions": {
            "other": true,
            "comments": true,
            "strings": true
        }
    },
    "markdownFormatter.enable": true,
    "markdownFormatter.fullWidthTurnHalfWidth": ",:;!“”‘’()?", // 这里配置的符号自动转小写
    "markdownFormatter.codeAreaToBlock": "javascript", // md格式化风格
    "markdownFormatter.formatCodes": true, // md格式化代码
    // 格式化选项
    "markdownFormatter.formatOpt": {
        "indent_size": 2, // 缩进
        "end_with_newline": true, // 末尾空行
        "space_after_named_function": true, // 方法名与()之间留空格
        "max_preserve_newlines": 1, // 最大连续空行
        "brace_style": "preserve-inline" // 折行风格
    },
    "files.associations": {
        "*.vue": "vue",
        "*.cjson": "jsonc",
        "*.wxss": "css",
        "*.wxs": "javascript"
    },
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": false
    },
    "[html]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    },
    "[vue]": {
        "editor.defaultFormatter": "numso.prettier-standard-vscode"
    },
    "[javascript]": {
        "editor.defaultFormatter": "numso.prettier-standard-vscode"
    },
    "[typescript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "explorer.confirmDragAndDrop": false,
    "emmet.includeLanguages": {
        "wxml": "html"
    },
    "minapp-vscode.disableAutoConfig": true
}

二.关于VSCode配置常用的插件如下:

  • Azure Repos
  • Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
  • CSS Formatter
  • Easy LESS
  • Elise
  • ES7 React/Redux/GraphQL/React-Native snippets
  • HTML Snippets
  • JS-CSS-HTML Formatter
  • koroFileHeader(增加文件头部注释)
  • Live Sass Compiler
  • Markdown PDF
  • Npm Dependency
  • px to rem
  • Reference Search View
  • vue
  • Vue 3 Snippets
  • Vue VSCode Snippets
  • vue-beautify
  • Vue-i18n-aux
  • vue-scss-variable-scan
  • wechat-snippet

你可能感兴趣的:(vscode,ide,编辑器)