VS code 的常用插件 和 基本配置

VS code 的常用插件 和 基本配置

• 都是自己目前使用的插件, 和使用习惯的配置

常用插件 和 VS code 的基本设置

settting.js 的常用设置

{
    "editor.fontSize": 22,
    "editor.wordWrap": "on",
    "workbench.startupEditor": "newUntitledFile",
    "git.autofetch": true,
    "git.enableSmartCommit": true,
    "files.associations": {
        "*.cjson": "jsonc",
        "*.wxss": "css",
        "*.wxs": "javascript"
    },
    "emmet.includeLanguages": {
        "wxml": "html"
    },
    "minapp-vscode.disableAutoConfig": true,
    "explorer.confirmDelete": false,
    "vetur.format.options.tabSize": 4,
    "explorer.confirmDragAndDrop": false,
    "javascript.updateImportsOnFileMove.enabled": "always",
    "vetur.format.defaultFormatterOptions": {
        "prettier": {
            "semi": false, // 结尾不带分号
            "singleQuote": true, // 单引号
            "printWidth": 200 // 设置200个字符不换行
        }
    },
    "prettier.tabWidth": 4,
    "prettier.trailingComma": "none", // 是否使用尾逗号，有三个可选值"<none|es5|all>"
    "[vue]": {
        "editor.defaultFormatter": "octref.vetur"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "prettier.printWidth": 200,
    "prettier.useEditorConfig": false,
    "prettier.singleQuote": true,
    "prettier.semi": false,
    "workbench.iconTheme": "material-icon-theme",
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "less.compile": {
        "outExt": ".wxss"
    },
    "liveServer.settings.donotShowInfoMsg": true,
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "workbench.colorTheme": "Monokai"
}

插件说明

1. Beautify
   
   代码格式化工具, 可以配置默认的基本参数
   Beautify GitHub 官方地址

setting.js 中的 代码片段就是用来自定义 Beautify 的校验格式

	"beautify.config": {
       "tab_size": 4,  // 首行缩进 4 个字符
       "keep_array_indentation": true // 保留数组缩进
   }

2. Bracket Pair Colorizer
   

Bracket Pair Colorizer 用于高亮()

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

中文简体语言包

4. Color Highlight
   

Color Highlight 可以在代码处,查看颜色

5. Color Info
   

   Color Info 可在代码处直接编辑颜色
   

6. Element UI Snippets
   

   Element UI Snippets 是使用 ElementUI 的快捷键

7. ESLint
   

   ESLint 用来校验代码的规范性

8. npm Intellisense
   

   在import语句中自动完成npm模块的Visual Studio代码插件

9. Path Intellisense
   

   自动完成文件名的Visual Studio Code插件
   

10. snippet-creator
    

    snippet-creator 一款可以快捷设置代码片段的插件
    使用方法
    首先写好需要设置的代码片段
    
    之后 全选代码 按 F1键 调出 插件
    
    选择插件之后 出现的选项中选择自己需要的代码格式, 例如 vue
    
    之后 设置代码片段的名称 例如 svue, 后面的步骤 可以直接一直 输入 svue
    
    使用 ${num}可以指定光标的位置
    

11. run code
    
    可以直接在js文件中右键运行代码
    

12. easy less 用来在小程序中使用less语法 文章地址