質問編集履歴
2
普通なら「Watching...」と出る箇所が「Working on it...」のままコンパイルされない状態です。Liveは利用できる状態です。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -6,6 +6,10 @@
|
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
|
|
9
|
+
普通なら「Watching...」と出る箇所が「Working on it...」のままコンパイルされない状態です。Liveは利用できる状態です。
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
9
13
|
### 発生している問題・エラーメッセージ
|
|
10
14
|
|
|
11
15
|
|
1
live sass compilerがおかしいと感じたのでsettings.jsonのコードを追記しました
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -49,3 +49,223 @@
|
|
|
49
49
|
|
|
50
50
|
|
|
51
51
|
新卒1年目のコーダーです。お手数おかけしますがご回答の程お願いいたします。
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
### 追記
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
line sassの設定→ワークスペース→settings.jsonに記入しているコードを共有いたします。
|
|
60
|
+
|
|
61
|
+
```{
|
|
62
|
+
|
|
63
|
+
// VSCodeワークスペースルートフォルダ
|
|
64
|
+
|
|
65
|
+
"folders": [
|
|
66
|
+
|
|
67
|
+
{
|
|
68
|
+
|
|
69
|
+
"path": "."
|
|
70
|
+
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
],
|
|
74
|
+
|
|
75
|
+
// VSCodeワークスペース用各種設定
|
|
76
|
+
|
|
77
|
+
"settings": {
|
|
78
|
+
|
|
79
|
+
// Sass用設定を追記
|
|
80
|
+
|
|
81
|
+
// Sassのコンパイルによる出力設定
|
|
82
|
+
|
|
83
|
+
"liveSassCompile.settings.formats": [
|
|
84
|
+
|
|
85
|
+
{
|
|
86
|
+
|
|
87
|
+
"format": "expanded", // 「nested」「compact」「compressed」から選択
|
|
88
|
+
|
|
89
|
+
"extensionName": ".css", // 拡張子「.css」として出力
|
|
90
|
+
|
|
91
|
+
"savePath": null // 別フォルダに出力する場合は文字列で指定
|
|
92
|
+
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
],
|
|
96
|
+
|
|
97
|
+
// Sassのコンパイル監視対象外とするフォルダを指定
|
|
98
|
+
|
|
99
|
+
"liveSassCompile.settings.excludeList": [
|
|
100
|
+
|
|
101
|
+
"**/node_modules/**",
|
|
102
|
+
|
|
103
|
+
".vscode/**",
|
|
104
|
+
|
|
105
|
+
".history/**"
|
|
106
|
+
|
|
107
|
+
]
|
|
108
|
+
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
ユーザーのsettings.jsonは下記のとおりです。
|
|
116
|
+
|
|
117
|
+
```{
|
|
118
|
+
|
|
119
|
+
"workbench.iconTheme": "vscode-icons",
|
|
120
|
+
|
|
121
|
+
"diffEditor.renderSideBySide": false, // Git の差分を行内に表示
|
|
122
|
+
|
|
123
|
+
"editor.colorDecorators": false, // カラーデコレーターを非表示
|
|
124
|
+
|
|
125
|
+
"editor.formatOnPaste": true, // ファイル保存時に自動でフォーマット
|
|
126
|
+
|
|
127
|
+
"editor.formatOnType": true, // 入力した行を自動でフォーマット
|
|
128
|
+
|
|
129
|
+
"editor.hover.enabled": false, // ホバーしたときに出る解説を消す
|
|
130
|
+
|
|
131
|
+
"editor.minimap.renderCharacters": false, // ミニマップの表示文字をブロックに変更
|
|
132
|
+
|
|
133
|
+
"editor.minimap.showSlider": "always", // 表示領域をミニマップで常にハイライト
|
|
134
|
+
|
|
135
|
+
"editor.multiCursorModifier": "ctrlCmd", // マウスでの複数選択時の修飾キーを変更
|
|
136
|
+
|
|
137
|
+
"editor.renderControlCharacters": true, // 制御文字を表示
|
|
138
|
+
|
|
139
|
+
"editor.renderLineHighlight": "all", // 選択行を行番号含めすべてハイライト
|
|
140
|
+
|
|
141
|
+
"editor.renderWhitespace": "all", // 半角スペースを常に表示
|
|
142
|
+
|
|
143
|
+
"editor.snippetSuggestions": "top", // Emmet などのスニペット候補を優先して表示
|
|
144
|
+
|
|
145
|
+
"editor.tabSize": 2, // タブのサイズ変更
|
|
146
|
+
|
|
147
|
+
"editor.wordWrap": "on", // エディターの幅で折り返し
|
|
148
|
+
|
|
149
|
+
"emmet.showSuggestionsAsSnippets": true, // Emmet の候補を表示
|
|
150
|
+
|
|
151
|
+
"emmet.triggerExpansionOnTab": true, // TAB キーで Emmet を展開できるようにする
|
|
152
|
+
|
|
153
|
+
"emmet.variables": { // Emmet で展開される HTML の言語を変更
|
|
154
|
+
|
|
155
|
+
"lang": "ja"
|
|
156
|
+
|
|
157
|
+
},
|
|
158
|
+
|
|
159
|
+
"explorer.confirmDelete": false, // ファイル削除時の確認を表示しない
|
|
160
|
+
|
|
161
|
+
"files.associations": {
|
|
162
|
+
|
|
163
|
+
".*lintrc": "json",
|
|
164
|
+
|
|
165
|
+
"*.scss": "css"
|
|
166
|
+
|
|
167
|
+
},
|
|
168
|
+
|
|
169
|
+
"files.exclude": { // エクスプローラーから非表示にするファイル
|
|
170
|
+
|
|
171
|
+
"**/*.map": true,
|
|
172
|
+
|
|
173
|
+
"**/node_modules": true
|
|
174
|
+
|
|
175
|
+
},
|
|
176
|
+
|
|
177
|
+
"files.insertFinalNewline": true, // ファイルの保存時に末尾を改行
|
|
178
|
+
|
|
179
|
+
"files.trimFinalNewlines": true, // ファイルの保存時に最終行以降をトリミング
|
|
180
|
+
|
|
181
|
+
"files.trimTrailingWhitespace": true, // ファイルの保存時に行末の空白をトリミング
|
|
182
|
+
|
|
183
|
+
"[markdown]": {
|
|
184
|
+
|
|
185
|
+
"files.trimTrailingWhitespace": false // Markdown のファイルは行末の空白をトリミングしない
|
|
186
|
+
|
|
187
|
+
},
|
|
188
|
+
|
|
189
|
+
"html.format.contentUnformatted": "pre, code, textarea, title, h1, h2, h3, h4, h5, h6, p", // タグ内の記述はフォーマットしない
|
|
190
|
+
|
|
191
|
+
"html.format.extraLiners": "", // head, body, /html タグの前に改行を入れない
|
|
192
|
+
|
|
193
|
+
"html.format.unformatted": null, // フレージング・コンテンツ（旧インライン要素のようなタグ）はフォーマットしない
|
|
194
|
+
|
|
195
|
+
"html.format.wrapLineLength": 0, // 行の文字数制限を無くし自動で改行させない
|
|
196
|
+
|
|
197
|
+
"search.exclude": { // 検索対象外にするファイル設定（ files.exclude のファイルも含む）
|
|
198
|
+
|
|
199
|
+
"**/tmp": true
|
|
200
|
+
|
|
201
|
+
},
|
|
202
|
+
|
|
203
|
+
"window.openFoldersInNewWindow": "on", // 新規ワークスペースを別ウインドウで開く
|
|
204
|
+
|
|
205
|
+
"window.title": "${activeEditorMedium}${separator}${rootName}", // ウインドウ上部に表示する文字列の設定
|
|
206
|
+
|
|
207
|
+
"workbench.editor.labelFormat": "short", // タブに表示する文字列の設定
|
|
208
|
+
|
|
209
|
+
"workbench.editor.tabSizing": "shrink", // タブの表示設定
|
|
210
|
+
|
|
211
|
+
"workbench.startupEditor": "none",
|
|
212
|
+
|
|
213
|
+
"window.zoomLevel": 0,
|
|
214
|
+
|
|
215
|
+
"color-highlight.markerType": "outline",
|
|
216
|
+
|
|
217
|
+
"liveServer.settings.donotShowInfoMsg": true // Welcome Page を表示しない
|
|
218
|
+
|
|
219
|
+
CSScomb
|
|
220
|
+
|
|
221
|
+
"csscomb.formatOnSave": true,
|
|
222
|
+
|
|
223
|
+
"csscomb.preset": "~/.vscode/mycsscomb.json",
|
|
224
|
+
|
|
225
|
+
"csscomb.syntaxAssociations": {
|
|
226
|
+
|
|
227
|
+
"postcss": "css"
|
|
228
|
+
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
"liveSassCompile.settings.formats": [ //Sassの出力内容の設定
|
|
232
|
+
|
|
233
|
+
{
|
|
234
|
+
|
|
235
|
+
"format": "expanded", //nested、compact、compressedのどれかを選ぶ
|
|
236
|
+
|
|
237
|
+
"extensionName": ".css", //style.cssとして出力
|
|
238
|
+
|
|
239
|
+
"savePath": "/css" //cssフォルダの中にstyle.cssを出力
|
|
240
|
+
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
],
|
|
244
|
+
|
|
245
|
+
"liveSassCompile.settings.excludeList": [ //対象外とするフォルダを指定
|
|
246
|
+
|
|
247
|
+
"**/node_modules/**",
|
|
248
|
+
|
|
249
|
+
".vscode/**",
|
|
250
|
+
|
|
251
|
+
".history/**"
|
|
252
|
+
|
|
253
|
+
],
|
|
254
|
+
|
|
255
|
+
"liveSassCompile.settings.autoprefix": [ //ベンダープレフィックスの指定
|
|
256
|
+
|
|
257
|
+
"last 2 versions",
|
|
258
|
+
|
|
259
|
+
"ie >= 11",
|
|
260
|
+
|
|
261
|
+
"Android >= 4",
|
|
262
|
+
|
|
263
|
+
"ios_saf >= 8"
|
|
264
|
+
|
|
265
|
+
]
|
|
266
|
+
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
|
|
270
|
+
|
|
271
|
+
```
|