一、界面字体大小(json配置文件已包含)

设置 → 搜索栏输入 editor:fontsize 用来设置字体大小,可以设置editor.fontsize:14。

二、文件自动保存(json配置文件已包含)

设置 → 搜索栏输入 files.autoSave 表示文件是否进行自动保存,推荐设置为onFocusChange,即文件焦点变化时自动保存。

三、启用Tab键代码补全(json配置文件已包含)

设置 → 搜索栏输入 editor.tabCompletion 用来在出现推荐值时,按下Tab键是否自动填入最佳推荐值,推荐设置为 on 。

四、开启代码行号

设置 → 搜索栏输入 editor.lineNumbers 设置代码行号,即editor.lineNumbers :on 。

五、import引入包排序(json配置文件已包含)

设置 → 搜索栏输入 editor.codeActionsOnSave ,在json配置文件中修改 source.organizeImports 属性,该属性能够在保存时,按照字母顺序把 import 语句进行排列,推荐设置为 true,即 “editor.codeActionsOnSave”: { “source.organizeImports”: true }

六、禁用自动更新(json配置文件已包含)

设置 → 搜索栏输入 update.mode → 更改为 none 。

七、开启代码提示

设置 → 搜索栏输入 Snippets Prevent Quick Suggestions→取消此项的勾选

八、基础json配置

设置 → 搜索栏输入 workbench.settings.editor → 将选项 ui 修改为 json 。
Ctrl+Shift+P → 选择Setting(json) 打开settings.json文件 → 将下面配置复制 → 保存并退出。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
{
// 设置开发环境中的文件关联
    "files.associations": {
    "*.vue": "vue", // 以.vue为扩展名的文件关联到Vue.js文件类型
    "*.wpy": "vue", // .wpy文件用于WePY小程序框架,该框架支持Vue.js
    "*.wxml": "html", // .wxml文件是编写小程序的页面结构文件,其语法类似于HTML
    "*.wxss": "css" // .wxss文件是用于编写小程序样式的文件,其语法类似于CSS
    },
    // 指定集成终端所使用的Shell:Windows命令提示符
    "terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe",
    // 启用Git的智能提交功能,自动生成相关的提交消息
    "git.enableSmartCommit": true,
    // 启用Git自动获取autofetch功能,从远程仓库获取最新的提交信息
    "git.autofetch": true,
    // Emmet插件Tab键自动补全
    "emmet.triggerExpansionOnTab": true,
    // Emmet插件显示缩写建议
    "emmet.showAbbreviationSuggestions": true,
    // 输入Emmet语法并按Tab键时,始终显示提示的代码
    "emmet.showExpandedAbbreviation": "always",
    // 使用Emmet插件时,将以下文件类型等同于HTML文件,方便Emmet正确处理其中的缩写
    "emmet.includeLanguages": {
    "vue-html": "html",
    "vue": "html",
    "wpy": "html"
    },
    //"workbench.colorTheme": "Monokai",             // 配置主题颜色
    "git.confirmSync": false,                        // git是否启用自动拉取
    "explorer.confirmDelete": false,                 // 两个选择器中是否换行
    "editor.fontSize": 14,                           // 字体设置
    "window.zoomLevel": 1,                           // 系统界面和编辑面板字体比例
    "editor.wordWrap": "on",                         // 自动换行
    "editor.detectIndentation": false,               // 编辑器自动检测,使用空格还是制表符
    "editor.tabSize": 2,                             // 重新设定Tab键空格数
    "files.autoSave": "onFocusChange",               // 当前文件失去焦点后自动保存
    "editor.formatOnSave": false,                    // #值设置为 true/false ,决定保存时是否自动格式化
    "editor.rulers": [                               //每120行就显示一条线
    ],
    // 在使用搜索功能时,将这些文件夹/文件排除在外
    "search.exclude": {
        "**/node_modules": true,
        "**/bower_components": true,
        "**/target": true,
        "**/logs": true,
    },
    // 这些文件将不会显示在工作空间中
    "files.exclude": {
        "**/.git": true,
        "**/.svn": true,
        "**/.hg": true,
        "**/CVS": true,
        "**/.DS_Store": true,
        "**/*.js": {
            "when": "$(basename).ts"                  //ts编译后生成的js文件将不会显示在工作空中
        },
        "**/node_modules": true
    },
    // #让vue中的js按"prettier"格式进行格式化
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.format.defaultFormatter.js": "prettier",
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            // #vue组件中html代码格式化样式
            "wrap_attributes": "force-aligned",       //也可以设置为“auto”,效果会不一样
            "wrap_line_length": 200,
            "end_with_newline": false,
            "semi": false,
            "singleQuote": true
        },
        "prettier": {
            "semi": false,
            "singleQuote": true
        }
    },
    "editor.tabCompletion": "on",                    // 按下Tab自动补全
    "editor.codeActionsOnSave": {
      "source.organizeImports": true                 // 保存文件时自动对import语句排序
    },
    "update.mode": "none",                           // 禁止系统更新
    // Prettier配置规则
    "prettier.printWidth": 100,                      // 一行最多 100 字符
    "prettier.useTabs": false,                       // 不使用缩进符,而使用空格
    "prettier.tabWidth": 4,                          // 使用 4 个空格缩进
    "prettier.semi": true,                           // 行尾需要有分号
    "prettier.singleQuote": true,                    // 使用单引号
    "prettier.jsxSingleQuote": false,                // jsx不使用单引号,而使用双引号
    "prettier.bracketSpacing": true,                 // 大括号内的首尾需要空格
    "prettier.requirePragma": false,                 // 不需要写文件开头的 @prettier
    "prettier.insertPragma": false,                  // 不需要自动在文件开头插入 @prettier
    // ESlint配置规则
    "eslint.enable": true,                           // 默认情况下启用ESLint插件
    "eslint.run": "onType",                          // 运行ESLint的时间,默认onType(输入时)运行
    "eslint.options": {
      // 选项设置,指定需要检查的文件扩展名
      "extensions": [
        ".js",
        ".vue",
        ".jsx",
        ".tsx"
      ]
    },
    // Easy LESS配置规则
    "less.compile": {
        "compress": false,  // 删除多余空白字符(空格和换行符);当值为true时,则生成的CSS文件将是压缩过的。
        "sourceMap": false, // 是否创建文件目录树,默认为false;当值为true时,则生成与Less文件源映射的CSS文件,方便调试。
        "out": true,        // 是否编译输出文件,默认为true;当值为false时,则编译时不生成实际的CSS文件,只在内存中进行。
        "outExt": ".css",   // 输出文件的后缀,默认为.css。
        // "outExt": ".wxss", // 输出文件的后缀,小程序可以写.wxss。      
    },
}