Vscode-常用插件

使用

1. 跳行

右下角显示光标行和列

2. 拆分编辑器 方便代码比对等

插件

可根据个人情况按需使用

1. Chinese (Simplified) Language 简体中文插件
2. Bracket Pair Colorizer 让括号拥有独立的颜色，易于区分。可以配合任意主题使用。
3. GitLens 当前代码中查看git日志 GitLens插件 • 每一行代码旁边都有日志 • 也可以查看全部的日志，在VsCode左侧菜单栏，点击GitLens图标即可查看History。 git脚本 webpack一键使用原配置项打包
4. filesize 在底部状态栏显示当前文件大小，点击后还可以看到详细创建、修改时间
5. Import Cost 计算引入包大小,对于项目打包后体积掌握很有帮助
6. koroFileHeader 读取用户自定义模板，通过快捷键添加文件头部注释、在光标处添加函数注释 头部注释配置

"fileheader.customMade": {
        "Author": "xiangyulong",
        "Date": "Do not edit",
        "LastEditTime": "Do not edit",
        "LastEditors": "xiangyulong",
        "Description": ""
    }

7. CSS Peek （Vue CSS Peek） 跳转到css定义位置 • 未使用

• 使用后 • 快捷键全局查找mac (cmd+T) 8. IntelliSense for CSS class names in HTML 提供css联想补全功能

合并使用 9. TODO插件 • TODO Highlight • Todo Tree

配置

{
    "js-beautify-html": {
        "wrap_attributes": "force-aligned"
    },
    "prettyhtml": {
        "printWidth": 100,
        "singleQuote": false,
        "wrapAttributes": false,
        "sortAttributes": true
    },
    "prettier": {
        "semi": false,
        "singleQuote": true,
        "trailingComma": "all",
        "useTabs": true,
    },
    "px2rem.rootFontSize": 37.5,
    "px2rem.isNeedNotes": false,
    "fileheader.customMade": {
        "Author": "xiangyulong",
        "Date": "Do not edit",
        "LastEditTime": "Do not edit",
        "LastEditors": "xiangyulong",
        "Description": ""
    },
    "vetur.format.options.tabSize": 4,
    "editor.formatOnSave": true,
    "editor.insertSpaces": true,
    "workbench.startupEditor": "welcomePage",
    "editor.quickSuggestions": {
        "strings": true
    },
    // vue设置
    "emmet.syntaxProfiles": {
        "vue-html": "html",
        "vue": "html"
    },
    "files.associations": {
        "*.vue": "vue",
        "*.cjson": "jsonc",
        "*.wxss": "css",
        "*.wxs": "javascript"
    },
    // vetur设置
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.validation.template": false,
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_line_length": 100,
            "wrap_attributes": "auto"
            // 自定义组件风格
            // "wrap_attributes": "force-aligned"
        }
    },
    // eslint设置
    // 保存时自动fix
    // "eslint.autoFixOnSave": true,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "html",
            "autoFix": true
        },
        {
            "language": "vue",
            "autoFix": true
        }
    ]
}