vscode從插件庫里安裝eslint和prettier
實現(xiàn)自動格式化
|
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
|
{ // 是否允許自定義的snippet片段提示 "editor.snippetSuggestions": "top", // vscode默認啟用了根據(jù)文件類型自動設置tabsize的選項 "editor.detectIndentation": false, // 重新設定tabsize "editor.tabSize": 2, // #每次保存的時候自動格式化 "editor.formatOnSave": false, // #每次保存的時候將代碼按eslint格式進行修復 "eslint.autoFixOnSave": true, "editor.fontWeight": "400", "editor.formatOnType": false, "workbench.iconTheme": "material-icon-theme", "git.confirmSync": false, "team.showWelcomeMessage": false, "window.zoomLevel": 0, "editor.renderWhitespace": "boundary", "editor.cursorBlinking": "smooth", "editor.minimap.enabled": true, "editor.minimap.renderCharacters": false, "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}", "editor.codeLens": true, //eslint 代碼自動檢查相關配置 "eslint.enable": true, "eslint.run": "onType", "eslint.options": { "extensions": [ ".js", ".vue" ] }, // 添加 vue 支持 "eslint.validate": [ "javascriptreact", "vue", "javascript", { "language": "vue", "autoFix": true }, "html", { "language": "html", "autoFix": true } ], // #讓prettier使用eslint的代碼格式進行校驗 "prettier.eslintIntegration": true, // #去掉代碼結尾的分號 "prettier.semi": false, // #使用帶引號替代雙引號 "prettier.singleQuote": true, // #讓函數(shù)(名)和后面的括號之間加個空格 "javascript.format.insertSpaceBeforeFunctionParenthesis": true, // #這個按用戶自身習慣選擇 "vetur.format.defaultFormatter.html": "js-beautify-html", // #讓vue中的js按編輯器自帶的ts格式進行格式化 "vetur.format.defaultFormatter.js": "vscode-typescript", "explorer.confirmDelete": false, "vetur.format.defaultFormatterOptions": { "js-beautify-html": { "wrap_attributes": "force-aligned" // #vue組件中html代碼格式化樣式 } }, // 格式化stylus, 需安裝Manta's Stylus Supremacy插件 "stylusSupremacy.insertColons": false, // 是否插入冒號 "stylusSupremacy.insertSemicolons": false, // 是否插入分好 "stylusSupremacy.insertBraces": false, // 是否插入大括號 "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否換行 "stylusSupremacy.insertNewLineAroundBlocks": false, // 兩個選擇器中是否換行 "files.associations": { "*.cjson": "jsonc", "*.wxss": "css", "*.wxs": "javascript" }, "emmet.includeLanguages": { "wxml": "html" }, "minapp-vscode.disableAutoConfig": true, "window.menuBarVisibility": "visible", "git.enableSmartCommit": true, "git.autofetch": true, "liveServer.settings.donotShowInfoMsg": true, "[html]": { "editor.defaultFormatter": "vscode.html-language-features" }, "javascript.updateImportsOnFileMove.enabled": "always", "workbench.colorTheme": "SynthWave '84", "editor.fontSize": 18, "search.followSymlinks": false, "workbench.sideBar.location": "right", "vscode_custom_css.policy": true, "vscode_custom_css.imports": [ "file:///C:/Users/wongseedling/Desktop/vscode-transparent-glow/synthwave84.css", "file:///C:/Users/wongseedling/Desktop/vscode-transparent-glow/toolbar.css", "file:///C:/Users/wongseedling/Desktop/vscode-transparent-glow/vscode-vibrancy-style.css", "file:///C:/Users/wongseedling/Desktop/vscode-transparent-glow/enable-electron-vibrancy.js", ], // 高亮的顏色，emm暫時只支持這樣寫 "wxmlConfig.activeColor": { "color": "#e5c07b" }, // 是否禁用高亮組件 "wxmlConfig.activeDisable": false, // 是否開啟保存自動格式化 "wxmlConfig.onSaveFormat": false, "wxmlConfig.format": { "brace_style": "collapse", "end_with_newline": false, "indent_char": "", "indent_handlebars": false, "indent_inner_html": false, "indent_scripts": "keep", "indent_size": 2, "indent_with_tabs": true, "max_preserve_newlines": 1, "preserve_newlines": true, "wrap_attributes": "force-expand-multiline" }, // 高亮所忽略的組件數(shù)組 "wxmlConfig.tagNoActiveArr": [ "view", "button", "text", "icon", "image", "navigator", "block", "input", "template", "form", "camera", "textarea" ], "zenMode.restore": true, "breadcrumbs.enabled": true, "terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe", "[wxml]": { "editor.defaultFormatter": "qiu8310.minapp-vscode" }, "gitlens.advanced.messages": { "suppressLineUncommittedWarning": true }, "javascript.format.placeOpenBraceOnNewLineForControlBlocks": true, "editor.formatOnPaste": false, "vsicons.presets.hideFolders": true, "editor.cursorStyle": "line-thin"} |
第二版本
|
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
153
154
|
{ // 換行 "editor.wordWrap": "on", // 是否允許自定義的snippet片段提示 "editor.snippetSuggestions": "top", // vscode默認啟用了根據(jù)文件類型自動設置tabsize的選項 不檢查縮進，保存后統(tǒng)一按設置項來設置 "editor.detectIndentation": false, // 重新設定tabsize 代碼縮進修改成4個空格 "editor.tabSize": 2, // #每次保存的時候自動格式化 "editor.formatOnSave": false, // #每次保存的時候將代碼按eslint格式進行修復 使用eslint 風格使用standard 進行代碼規(guī)則限制 "editor.fontWeight": "200", "editor.formatOnType": false, "workbench.iconTheme": "material-icon-theme", "git.confirmSync": false, "team.showWelcomeMessage": false, "window.zoomLevel": 0, "editor.renderWhitespace": "boundary", "editor.cursorBlinking": "smooth", "editor.minimap.enabled": true, "editor.minimap.renderCharacters": false, "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}", "editor.codeLens": true, //eslint 代碼自動檢查相關配置 "eslint.enable": true, "eslint.run": "onType", "eslint.options": { "configFile": "D:/.eslintrc.js", "plugins": ["html"], "extensions": [ ".js", ".vue" ] }, "eslint.validate": [ "javascript", "javascriptreact", "html", "vue"], // #讓prettier使用eslint的代碼格式進行校驗 "prettier.eslintIntegration": true, // #去掉代碼結尾的分號 "prettier.semi": true, // #使用帶引號替代雙引號 "prettier.singleQuote": true, // #讓函數(shù)(名)和后面的括號之間加個空格 "javascript.format.insertSpaceBeforeFunctionParenthesis": true, // #這個按用戶自身習慣選擇 html格式化 "vetur.format.defaultFormatter.html": "js-beautify-html", // #讓vue中的js按編輯器自帶的ts格式進行格式化 "vetur.format.defaultFormatter.js": "vscode-typescript", "explorer.confirmDelete": false, "vetur.format.defaultFormatterOptions": { "js-beautify-html": { "wrap_attributes": "force-aligned" // #vue組件中html代碼格式化樣式 } }, // 格式化stylus, 需安裝Manta's Stylus Supremacy插件 "stylusSupremacy.insertColons": false, // 是否插入冒號 "stylusSupremacy.insertSemicolons": false, // 是否插入分好 "stylusSupremacy.insertBraces": false, // 是否插入大括號 "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否換行 "stylusSupremacy.insertNewLineAroundBlocks": false, // 兩個選擇器中是否換行 "files.associations": { "*.cjson": "jsonc", "*.wxss": "css", "*.wxs": "javascript" }, "emmet.includeLanguages": { "wxml": "html" }, "minapp-vscode.disableAutoConfig": true, "window.menuBarVisibility": "visible", "git.enableSmartCommit": true, "git.autofetch": true, "liveServer.settings.donotShowInfoMsg": true, "[html]": { "editor.defaultFormatter": "vscode.html-language-features" }, "javascript.updateImportsOnFileMove.enabled": "always", "workbench.colorTheme": "Default Dark+", // 字體大小 "editor.fontSize": 15, // 設置行高 "editor.lineHeight": 20, "search.followSymlinks": false, "workbench.sideBar.location": "right", "vscode_custom_css.policy": true, "vscode_custom_css.imports": [ "file:///C:/vscode-transparent-glow/synthwave84.css", "file:///C:/vscode-transparent-glow/toolbar.css", "file:///C:/vscode-transparent-glow/vscode-vibrancy-style.css", "file:///C:/vscode-transparent-glow/enable-electron-vibrancy.js" ], // 高亮的顏色，emm暫時只支持這樣寫 "wxmlConfig.activeColor": { "color": "#e5c07b" }, // 是否禁用高亮組件 "wxmlConfig.activeDisable": false, // 是否開啟保存自動格式化 "wxmlConfig.onSaveFormat": false, "wxmlConfig.format": { "brace_style": "collapse", "end_with_newline": false, "indent_char": "", "indent_handlebars": false, "indent_inner_html": false, "indent_scripts": "keep", "indent_size": 2, "indent_with_tabs": false, "max_preserve_newlines": 1, "preserve_newlines": false, "wrap_attributes": "force-expand-multiline" }, // 高亮所忽略的組件數(shù)組 "wxmlConfig.tagNoActiveArr": [ "view", "button", "text", "icon", "image", "navigator", "block", "input", "template", "form", "camera", "textarea" ], "zenMode.restore": true, "breadcrumbs.enabled": true, "terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe", "[wxml]": { "editor.defaultFormatter": "qiu8310.minapp-vscode" }, "gitlens.advanced.messages": { "suppressLineUncommittedWarning": true }, "javascript.format.placeOpenBraceOnNewLineForControlBlocks": true, "editor.formatOnPaste": false, "vsicons.presets.hideFolders": true, "editor.cursorStyle": "line-thin", "editor.suggestSelection": "first", "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue", "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "terminal.integrated.rendererType": "dom", "vscode_vibrancy.opacity": 0.5} |
第一項 VS code編輯使用eslint的規(guī)則去格式化代碼
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
{ "[javascript]": { "editor.defaultFormatter": "HookyQR.beautify" }, "[html]": { "editor.defaultFormatter": "HookyQR.beautify" }, "eslint.validate": [ "javascript", "javascriptreact", "vue-html", { "language": "vue", "autoFix": true } ], "eslint.run": "onSave", "eslint.autoFixOnSave": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": true },} |
VS code還可以指定ESLint的格式文件
|
1
2
3
4
5
6
7
8
9
10
|
"eslint.options": { "configFile": "E:/git/github/styleguide/eslint/.eslintrc.js", "plugins": ["html"]},"eslint.validate": [ "javascript", "javascriptreact", "html", "vue"] |
第二項 使用 Prettier - Code formatter 根據(jù)eslint的規(guī)則去格式化代碼
|
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
|
"[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "eslint.validate": [ "javascript", "javascriptreact", "vue-html", { "language": "vue", "autoFix": true } ], "eslint.run": "onSave", "eslint.autoFixOnSave": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "prettier.printWidth": 200, "prettier.requireConfig": true, "prettier.semi": false, "prettier.useEditorConfig": false, "prettier.useTabs": true, |
|
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
153
154
155
156
157
|
{ // 換行 "editor.wordWrap": "on", // 是否允許自定義的snippet片段提示 "editor.snippetSuggestions": "top", // vscode默認啟用了根據(jù)文件類型自動設置tabsize的選項 不檢查縮進，保存后統(tǒng)一按設置項來設置 "editor.detectIndentation": false, // 重新設定tabsize 代碼縮進修改成4個空格 "editor.tabSize": 2, // #每次保存的時候自動格式化 "editor.formatOnSave": false, // #每次保存的時候將代碼按eslint格式進行修復 使用eslint 風格使用standard 進行代碼規(guī)則限制 "editor.fontWeight": "200", "editor.formatOnType": false, "workbench.iconTheme": "vscode-icons-mac", "git.confirmSync": false, "team.showWelcomeMessage": false, "window.zoomLevel": 0, "editor.renderWhitespace": "boundary", "editor.cursorBlinking": "smooth", "editor.minimap.enabled": true, "editor.minimap.renderCharacters": false, "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}", "editor.codeLens": true, //eslint 代碼自動檢查相關配置 "eslint.enable": true, "eslint.run": "onType", "eslint.options": { "configFile": "D:/.eslintrc.js", "plugins": [ "html" ], "extensions": [ ".js", ".vue" ] }, "eslint.validate": [ "javascript", "javascriptreact", "html", "vue" ], // #讓prettier使用eslint的代碼格式進行校驗 "prettier.eslintIntegration": true, // #去掉代碼結尾的分號 "prettier.semi": true, // #使用帶引號替代雙引號 "prettier.singleQuote": true, // #讓函數(shù)(名)和后面的括號之間加個空格 "javascript.format.insertSpaceBeforeFunctionParenthesis": true, // #這個按用戶自身習慣選擇 html格式化 "vetur.format.defaultFormatter.html": "js-beautify-html", // #讓vue中的js按編輯器自帶的ts格式進行格式化 "vetur.format.defaultFormatter.js": "vscode-typescript", "explorer.confirmDelete": false, "vetur.format.defaultFormatterOptions": { "js-beautify-html": { "wrap_attributes": "force-aligned" // #vue組件中html代碼格式化樣式 } }, // 格式化stylus, 需安裝Manta's Stylus Supremacy插件 "stylusSupremacy.insertColons": false, // 是否插入冒號 "stylusSupremacy.insertSemicolons": false, // 是否插入分好 "stylusSupremacy.insertBraces": false, // 是否插入大括號 "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否換行 "stylusSupremacy.insertNewLineAroundBlocks": false, // 兩個選擇器中是否換行 "files.associations": { "*.cjson": "jsonc", "*.wxss": "css", "*.wxs": "javascript" }, "emmet.includeLanguages": { "wxml": "html" }, "minapp-vscode.disableAutoConfig": true, "window.menuBarVisibility": "visible", "git.enableSmartCommit": true, "git.autofetch": true, "liveServer.settings.donotShowInfoMsg": true, "[html]": { "editor.defaultFormatter": "vscode.html-language-features" }, "javascript.updateImportsOnFileMove.enabled": "always", "workbench.colorTheme": "SynthWave '84", // 字體大小 "editor.fontSize": 15, // 設置行高 "editor.lineHeight": 20, "search.followSymlinks": false, "workbench.sideBar.location": "left", "vscode_custom_css.policy": true, "vscode_custom_css.imports": [ "file:///C:/vscode-transparent/synthwave84.css", "file:///C:/vscode-transparent/toolbar.css", "file:///C:/vscode-transparent/vscode-vibrancy-style.css", "file:///C:/vscode-transparent/enable-electron-vibrancy.js" ], // 高亮的顏色，emm暫時只支持這樣寫 "wxmlConfig.activeColor": { "color": "#e5c07b" }, // 是否禁用高亮組件 "wxmlConfig.activeDisable": false, // 是否開啟保存自動格式化 "wxmlConfig.onSaveFormat": false, "wxmlConfig.format": { "brace_style": "collapse", "end_with_newline": false, "indent_char": "", "indent_handlebars": false, "indent_inner_html": false, "indent_scripts": "keep", "indent_size": 2, "indent_with_tabs": false, "max_preserve_newlines": 1, "preserve_newlines": false, "wrap_attributes": "force-expand-multiline" }, // 高亮所忽略的組件數(shù)組 "wxmlConfig.tagNoActiveArr": [ "view", "button", "text", "icon", "image", "navigator", "block", "input", "template", "form", "camera", "textarea" ], "zenMode.restore": true, "breadcrumbs.enabled": true, "terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe", "[wxml]": { "editor.defaultFormatter": "qiu8310.minapp-vscode" }, "gitlens.advanced.messages": { "suppressLineUncommittedWarning": true }, "javascript.format.placeOpenBraceOnNewLineForControlBlocks": true, "editor.formatOnPaste": false, "vsicons.presets.hideFolders": true, "editor.cursorStyle": "line-thin", "editor.suggestSelection": "first", "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue", "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "terminal.integrated.rendererType": "dom", "vscode_vibrancy.opacity": 1, "npm.fetchOnlinePackageInfo": false} |
到此這篇關于自己的vscode-settings.json配置的文章就介紹到這了,更多相關vscode-settings.json配置內容請搜索服務器之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://blog.csdn.net/weixin_43764814/article/details/90599482
