Vs Code学习心得

1.快捷键(Mac)

1. 收缩资源管理器: cmd + B
2. 光标开始到结尾复制 : cmd + shift + 上(下)箭头
3. 选中行: shift + 上箭头或者下箭头
4. 整行删除: cmd + shift + k
5. 整行复制移动: shift + option + 下箭头
6. 整行快速移动: option + 上箭头或下箭头
7. 选中一样的: cmd + D

• 光标到头部: cmd + 上箭头⬆️
• 光标到尾部: cmd + 下箭头⬇️
• 光标到左侧: cmd + 左箭头⬅️
• 光标到右侧: cmd + 右箭头➡️
• 文件夹目录快速打开 vscode ———— cmd + shift + p 安装code命令,输入code. 快速启动编辑器

2.常用插件

1. Chinese (Simplified) Language——中文补丁
2. open in browser —— 快速预览html
3. Live Server —— 服务器环境下打开页面
4. Easy LESS —— css预处理
5. cssrem —— px转换rem，需配置三行代码
6. Prettier-Standard - JavaScript formatter —— 格式化代码工具
7. Vetur —— vue集成,语法高亮,智能提示,格式化,自动补全,vue开发必备
8. GitLens — Git supercharged —— git记录
9. vscode-elm-jump —— 代码定义跳转
10. WXML - Language Service —— 小程序代码高亮
11. Auto Close Tag —— 标签闭合
12. ESLint —— 代码检查工具
13. Image preview —— 图片预览
14. Path Intellisense —— 文件路径
15. vscode-icons —— 图标
16. Vue VSCode Snippets —— vue代码补全
17. Bracket Pair Colorizer 2 —— 标签颜色,括号颜色
18. HTML Snippets —— 智能提示HTML标签，以及标签含义
19. JavaScript(ES6) code snippets ES6 : ES6语法智能提示及快速输入
20. vscode-pdf —— pdf文件预览
21. Better Comments—— 使用不同的前缀来让注释显示为不同的颜色
22. Import Cost —— 引入的文件大小
23. indent-rainbow—— 过颜色区分, 让你一眼就看出缩进
24. Class autocomplete for HTML—— 自动补全class=“” 属性
25. JavaScript (ES6) code snippets —— es6代码快捷键 也包含常用的console.log之类的 可以少码一点代码 提升效率
26. Code Runner —— 快速运行调试代码，无需配置繁杂的环境
27. Code Spell Checker —— 检查拼写错误
28. Color Highlight
29. Color info
30. path-alias —— 路径别名
31. SVG

推荐 VS code拓展

3.统一代码片段风格(settings Json)

{
    "files.associations": {
        "*.cjson": "jsonc",
        "*.wxss": "css",
        "*.wxs": "javascript"
    },
    // 导入文件时是否携带文件的扩展名
    "path-autocomplete.extensionOnImport": true,
    // 配置 @ 的路径提示
    "path-autocomplete.pathMappings": {
        "@": "${folder}/src"
    },
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue"
    ],
    "emmet.includeLanguages": {
        "wxml": "html"
    },
    "minapp-vscode.disableAutoConfig": true,
    "[javascript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "[less]": {
        "editor.defaultFormatter": "Wscats.eno"
    },
    "[vue]": {
        "editor.defaultFormatter": "octref.vetur"
    },
    "[json]": {
        "editor.defaultFormatter": "vscode.json-language-features"
    },
    "[html]": {
        "editor.defaultFormatter": "vscode.html-language-features"
    },
    "[typescript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "[css]": {
        "editor.defaultFormatter": "vscode.css-language-features"
    },
    "diffEditor.ignoreTrimWhitespace": false,
    "[jsonc]": {
        "editor.defaultFormatter": "Wscats.eno"
    },
    "workbench.editor.enablePreview": false,
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "vetur.format.defaultFormatterOptions": {

        "js-beautify-html": {
            // "wrap_attributes":  "aligned-multiple", //"force-expand-multiline", "auto", "force", "force-aligned"
            // "wrap_line_length": 200 ,
            // "end_with_newline": false
            "wrap_attributes": "aligned-multiple",
        },
        "prettyhtml": {
            "printWidth": 200,
            "singleQuote": false,
            "wrapAttributes": false,
            "sortAttributes": false
        },

        // "prettier": {
        //     "singleQuote": true,
        //     "semi": false,
        // }
    },
    "vetur.extensions": [
        
    ],
    "editor.quickSuggestions": {
        "strings": true
    },
    "editor.minimap.enabled": false,
    "vetur.grammar.customBlocks": {
        "docs": "md",
        "i18n": "json"
    },
    "editor.tabSize": 2,
    "explorer.confirmDelete": false,
    "git.enableSmartCommit": true,
    "fileheader.Author": "XiaoHao",
    "fileheader.LastModifiedBy": "XiaoHao",
    "[scss]": {
        "editor.defaultFormatter": "Wscats.eno"
    },
    "git.confirmSync": false,
    "liveServer.settings.donotShowInfoMsg": true,
    "editor.fontLigatures": false,
    "editor.fontSize": 15,
    "liveServer.settings.port": 0,
    "javascript.updateImportsOnFileMove.enabled": "always"
}