VScode-插件使用以及配置項

1.vscode 版本：

　　版本: 1.56.2 (user setup)

 

 

　　在最新版本中，vscode增加了賬戶登錄選項，實現了配置文件保存在賬戶中，在更換電腦或者端時，可以直接登錄自己賬號獲取雲端vscode配置。

2.配置保存路徑

　　github

3.插件列表

　　a.Auto Close Tag

　　　自動閉合標簽

　　b.Auto Complete Tag

　　　自動完成標簽

　　c.Auto Rename Tag

　　　重命名標簽時自動修改閉合標簽

　　d.Bracket Pair Colorizer 2

　　　括號用顏色區分，直觀顯示代碼塊

　　e.Chinese (Simplified) Language Pack for Visual Studio Code

  　　vscode中文簡體

　　f.cssrem

　　　編寫css時，將px轉換為rem

　　g.Easy LESS

　　　自動編譯less

　　h.ES7 React/Redux/GraphQL/React-Native snippets

　　　react，redux,rn代碼提示

　　i.Git Graph

　　　git圖

　　j.Git History

　　　git 提交歷史

　　k.GitLens — Git supercharged

　　　git源代碼管理

　　l.Highlight Matching Tag

　　　高亮匹配標簽

　　m.javascript console utils

　　　console.log()的簡寫，提示為clg

　　n.jQuery Code Snippets

　　　jq代碼提示

　　o.Live Server

　　　本地開啟簡易服務器

　　p.Material Icon Theme

　　　項目icon主題

　　q.Path Intellisense

　　　路徑智能提示

　　r.SCSS Formatter

　　　scss格式化

　　s.Vetur

　　　vue項目必備

　　t.vue

　　　一鍵生成vue代碼塊，推薦使用自定義代碼塊方式

　　u.ESLint

　　　代碼檢查

　　v.Prettier - Code formatter

　　　代碼格式化

4.部分插件配置項

　　代碼格式化時使用Prettier

　

{
    // 對應文件類型使用prettier格式化插件
    "[scss]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[less]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[jsonc]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[css]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },

    // vetur格式化的配置 使用js-beautify-html格式化html
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "auto",
            "wrap_line_length": 220,
            "end_with_newline": false
        },
        "prettyhtml": {
            "printWidth": 200,
            "singleQuote": false,
            "wrapAttributes": false,
            "sortAttributes": false,
            "end_with_newline": false
        }
    },
    "vetur.format.options.tabSize": 4,
    "vetur.validation.template": false,

    // 其它文件名映射
    "files.associations": {
        "*.cjson": "jsonc",
        "*.wxss": "css",
        "*.wxs": "javascript",
        "*.jsp": "html",
        "*.wxml": "html"
    },

    // 在不受支持的語言中啟用標簽縮寫 例如jsx
    "emmet.includeLanguages": {
        "wxml": "html",
        "javascript": "javascriptreact"
    },

    // 默認從當前git存儲庫的遠程庫進行提交拉取
    "git.autofetch": true,
    "git.ignoreMissingGitWarning": true,

    // 文件目錄結構的icon主題樣式
    "workbench.iconTheme": "material-icon-theme",

    // 保存時運行的代碼操作
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },
    "editor.minimap.enabled": false,
    "editor.tabSize": 4,
    "editor.formatOnSave": false,
    "editor.suggestSelection": "first",

    // prettier格式化規則
    "prettier.singleQuote": true,
    "prettier.jsxSingleQuote": true,
    "prettier.tabWidth": 4,
    "prettier.bracketSpacing": true,
    "prettier.arrowParens": "avoid",
    "prettier.printWidth": 200,
    "prettier.endOfLine": "crlf",
    "prettier.trailingComma": "none",
    "prettier.proseWrap": "never",
    "prettier.jsxBracketSameLine": true,

    // python配置規則
    "python.linting.flake8Enabled": true,
    "python.formatting.provider": "yapf",
    "python.formatting.yapfArgs": ["--style", "{column_limit: 200}"],
    "python.linting.flake8Args": ["--max-line-length=248"],
    "python.linting.pylintEnabled": false,
    "python.defaultInterpreterPath": "E:\\Install\\Python38\\python.exe",

    // scss使用重復的樣式定義時，報警告
    "scss.lint.duplicateProperties": "warning",

    // liveServer的配置
    "liveServer.settings.useLocalIp": true,
    "liveServer.settings.donotVerifyTags": true,
    "liveServer.settings.donotShowInfoMsg": true,

    // 解決合並沖突后自動轉到下一個沖突
    "merge-conflict.autoNavigateNextConflict.enabled": true,
    "diffEditor.ignoreTrimWhitespace": false,

    // 啟用js文件中的codeLen引用
    "javascript.referencesCodeLens.showOnAllFunctions": true,
    // 自動更新導入的路徑
    "javascript.updateImportsOnFileMove.enabled": "always",

    // 編輯器優化
    "workbench.startupEditor": "newUntitledFile",
    "workbench.enableExperiments": false,
    "workbench.settings.enableNaturalLanguageSearch": false,
    "workbench.editor.enablePreview": false,
    "workbench.editorAssociations": [
        {
            "viewType": "jupyter.notebook.ipynb",
            "filenamePattern": "*.ipynb"
        }
    ],

    // vscode更新后不顯示最新的發行說明
    "update.showReleaseNotes": false,

    // 文件目錄輸入@符號后路徑映射
    "path-intellisense.mappings": {
        "@": "${workspaceRoot}/src",
        "@components": "${workspaceRoot}/src/components",
        "@views": "${workspaceRoot}/src/views",
        "@config": "${workspaceRoot}/src/config",
        "@assets": "${workspaceRoot}/src/assets",
        "@common": "${workspaceRoot}/src/common"
    },

    // 對雙大括號語法進行縮進
    "html.format.indentHandlebars": true,
    // 屬性垂直對齊
    "html.format.wrapAttributes": "aligned-multiple"
}