插件:
Eslint
Prettier-Code formatter
vetur
.eslintrc.js:
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24module.exports = { root: true, env: { node: true }, extends: ['plugin:vue/essential', '@vue/standard'], parserOptions: { parser: '@babel/eslint-parser', ecmaVersion: 6 }, rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // 可用 tab 缩进 'no-tabs': 'off', // 缩进 2 个空格 indent: ['off', 2], // 组件命名忽略规则 'vue/multi-word-component-names': 'off', // 函数形参小括号前面是否要加空格(never:不需要;always:需要) 'space-before-function-paren': ['error', 'never'] } }
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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152{ // #让函数(名)和后面的括号之间不加空格 "javascript.format.insertSpaceBeforeFunctionParenthesis": false, //----------------------------------------- //导入文件时是否携带文件的扩展名 "path-autocomplete.extensionOnlmport": true, //配置@的路径提示 "path-autocomplete.pathMappings": { "@": "${folder}/src" }, //----------------------------------------- // 工作界面的设置 // 界面主题选择 // "workbench.colorTheme": "Solarized Light", // 工作栏左侧图标选择,需要安装vscode-icon插件 // "workbench.iconTheme": "vscode-icons", // 打开空工作台时,打开包含内容的新欢迎页面,none表示不打开 "workbench.startupEditor": "none", //------------------------------------------ // 窗口的设置 // 调整窗口的缩放级别。原始大小是 0,每次递增(例如 1)或递减(例如 -1)表示放大或缩小 20%。也可以输入小数以便以更精细的粒度调整缩放级别。 "window.zoomLevel": 0, //------------------------------------------- // editor.wordWrap 配置为wordWrapColumn或者bounded时起作用 "editor.wordWrap": "bounded", // 设置 超过word Wrap Column设置的字符数、达到视口最小宽度,时自动换行 "editor.wordWrapColumn": 120, // 设置输入tab键时是否自动转为插入空格(默认ture,即自动转空格),当editor.detectIndentation配置为 true 时,该配置项将被自动覆盖 "editor.insertSpaces": true, "editor.detectIndentation": false, //-------------------------------------------- //界面配置路径 Text Editor -> Files //设置延迟一定的时间后自动保存文件 "files.autoSave": "afterDelay", // 设置自动保存文件前需要延迟的时间,单位毫秒 默认1000 "files.autoSaveDelay": 1000, // 设置读写文件时所用编码 默认UTF-8,可针对每种语言进行设置 "files.encoding": "utf8", // 设置打开文件时,是否自动猜测字符编码,默认false,即不自动猜测,可针对每种语言进行设置 "files.autoGuessEncoding": false, //将 .art文件自动识别为html "files.associations": { "*.art": "html" }, //-------------------------------------------- // 界面配置路径 Text Editor -> Formatting // 设置黏贴内容时是否自动格式化,true表示自动格式化,需要配置格式化器(formatter)才可使用 "editor.formatOnPaste": true, // 设置保存文件时是否自动格式化,true表示自动格式化,需要配置格式化器(formatter)才可使用 "editor.formatOnSave": true, // 设置保存文件时格式化整个文件还是仅被修改处。该配置项仅在 "editor.formatOnPaste" 为 true时生效 "editor.formatOnSaveMode": "file", // 设置输入完成后是否自动格式化当前行 // "editor.formatOnType": true, //------------------------------------------- // 界面配置路径 Text Editor -> Minimap // 设置minimap的宽度以设置可渲染的最大列数,默认120 "editor.minimap.maxColumn": 120, //------------------------------------------- // 界面配置路径 Text Editor -> Suggestions // 默认选项为true 设置回车时是否接受默认建议选项 // "editor.quickSuggestions": true, //------------------------------------------- // Eslint插件配置 // 设置保存时是否自动修复代码 "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, // 界面配置路径 Extensiosn -> ESlint // 设置状态栏是否一直显示ESlint图标项,true表示一直显示 "eslint.alwaysShowStatus": true, // 设置是否把ESlint作为一个格式化器,true表示启用 "eslint.format.enable": true, //-------------------------------------------- // Prettier插件配置 // 界面配置路径 Extensiosn -> Prettier //是否使用项目下的editorconfig文件作为配置文件(会导致在vscode用户区配置的规则不生效) "prettier.useEditorConfig": false, //设置去除对象最后一个属性的多余逗号 "prettier.trailingComma": "none", // 设置是否开启prettier插件,默认为true,即开启 "prettier.enable": true, // 设置是否在每行末尾添加分号,默认为 true "prettier.semi": false, // 设置格式化时,保持单引号,如果设置为false,则单引号会自动变成双引号 "prettier.singleQuote": true, // 设置每个tab占用多少个空格 "prettier.tabWidth": 2, // 设置每行可容纳字符数 "prettier.printWidth": 120, // 设置是否使用tab键缩进行,默认为false,即不使用 "prettier.useTabs": true, // 在对象,括号与文字之间加空格 true - Example: { foo: bar } false - Example: {foo: bar}, 默认为true "prettier.bracketSpacing": true, // 设置在jsx中,是否把'>' 单独放一行,默认为false,即单独放一行 // "prettier.jsxBracketSameLine": true, // 设置各种代码的默认格式化器//以下为默认配置 "[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[less]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[jsonc]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, //----------------------------------------------- // Vetur插件配置 // 设置是否禁用插件格式化功能 默认为true,即开启 "vetur.format.enable": true, // 设置css代码(<style>包含的代码块)默认格式化器 "vetur.format.defaultFormatter.css": "prettier", "vetur.format.defaultFormatter.sass": "sass-formatter", "vetur.format.defaultFormatter.postcss": "prettier", "vetur.format.defaultFormatter.scss": "prettier", "vetur.format.defaultFormatter.less": "prettier", "vetur.format.defaultFormatter.stylus": "stylus-supremacy", // 设置html代码(<template>包含的代码块)默认格式化器 "vetur.format.defaultFormatter.html": "prettier", // 设置js代码<script>包含的代码块)默认格式化器 "vetur.format.defaultFormatter.js": "prettier-eslint", // 设置vetur默认使用 prettier格式化代码 "vetur.format.defaultFormatter.ts": "prettier", // 设置tab键占用的空格数,该配置将被所有格式化器继承 "vetur.format.options.tabSize": 2, // 设置是否使用tab键缩进 默认false,即不使用,该配置将被所有格式化器继承 "vetur.format.options.useTabs": true, // 控制是否忽略关于vscode项目配置错误的告警,默认为false,即不忽略 "vetur.ignoreProjectWarning": true, "vetur.format.defaultFormatterOptions": { "prettier": { "semi": false, "singleQuote": true } }, "editor.fontSize": 14, "editor.foldingStrategy": "indentation" }
原文链接:vscode保存自动格式化配置_明天还是要努力呀的博客-CSDN博客_vscode自动格式化配置
最后
以上就是真实小蝴蝶最近收集整理的关于vscode配置的全部内容,更多相关vscode配置内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复