チームで作業する場合、ソースマップ普通に便利かも。
てか必須かも。
いままでは
1）cssからscssを辿るのはそんなに大変でもない
2）もしSassファイル内での行番号を知りたい時は、ラインコメントを出力すればいい
みたいな感覚でいたんですけど
cssを見ればscssのどこか判ると言っても、20〜30を超える数の.scssを@importしたサイトになると流石に骨（心）が折れるし
ラインコメントなんてのは論外で、例えば改行の仕方が違う人がscssを編集するだけで
gitが反応しまくるので非常に面倒臭いってのが実際。
開発者ツールで直接scssのどこかに書いてあるのかが判るので、使わないより使った方が断然早い。
もし直接cssが見たいようて時は
ブラウザの設定を変更すれば切り替えられるので
安心安心
最近のエディタは、完全にVisual Studio Codeな気分です。100％は満たされないけど、かなりいいですねこれ。
codaからほぼ完全に乗り換えました。
悩みの種だった、ソースフォーマット時にspanの内側がフォーマットされない件も解決。
設定（ツールバーの「Code＞基本設定＞設定」）のこうなってる部分を
|
1 2 |
// 再フォーマットしてはならないタグの、コンマ区切りの一覧。'null' の場合、既定で https://www.w3.org/TR/html5/dom.html#phrasing-content にリストされているすべてのタグになります。 "html.format.unformatted": "a, abbr, acronym, b, bdo, big, br, button, cite, code, dfn, em, i, img, input, kbd, label, map, object, q, samp, select, small, span, strong, sub, sup, textarea, tt, var", |
こうする。
|
1 |
"html.format.unformatted":"", |
追記：2017-08-06）最近はsvgを追加した
|
1 |
"html.format.unformatted":"svg", |
あと最近のアップデート後に言語設定が英語に戻ってしまったので、
enをjaに書き換えました。
|
1 2 |
cmd + p >configure language |
|
1 2 3 4 5 6 |
{ // Defines VSCode's display language. // See https://go.microsoft.com/fwlink/?LinkId=761051 for a list of supported languages. // Changing the value requires restarting VSCode. "locale": "ja" } |
これで日本語に戻る。
|
1 2 3 4 |
diff cmd + p >compare |
|
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 |
{ // 新しいファイルに割り当てられる既定の言語モード。 "files.defaultLanguage": "html", // 有効にすると、ファイルの保存時に末尾の空白をトリミングします。 "files.trimTrailingWhitespace": true, // インデント "editor.tabSize": 2, // ウインドウ幅で折り返す "editor.wordWrap": "on", // エディターでインデントのガイドを表示する必要があるかどうかを制御します "editor.renderIndentGuides": true, // 現在の行をハイライト（allは行数まで含める "editor.renderLineHighlight": "all", // エディターで空白文字を表示する方法を制御します。'none'、'boundary' および 'all' が使用可能です。'boundary' オプションでは、単語間の単一スペースは表示されません。 "editor.renderWhitespace": "all", // エディターで制御文字を表示する必要があるかどうかを制御します "editor.renderControlCharacters": false, // インデントのガイド（.slim使う時とか便利 "editor.renderIndentGuides": true, // 自動フォーマットする "editor.formatOnType": true, // エディターで入力後に自動的に行の書式設定を行うかどうかを制御します "editor.formatOnType": true, // 貼り付けた内容がエディターにより自動的にフォーマットされるかどうかを制御します。フォーマッタを使用可能にする必要があります。また、フォーマッタがドキュメント内の範囲をフォーマットできなければなりません。 "editor.formatOnPaste": false, // ファイルを保存するときにフォーマットしてください。フォーマッタを使用可能にして、ファイルを自動保存せず、エディターをシャットダウンしないでください。 "editor.formatOnSave": true, // 拡張機能を自動更新 "extensions.autoUpdate": true, // 再フォーマットしてはならないタグの、コンマ区切りの一覧。'null' の場合、既定で https://www.w3.org/TR/html5/dom.html#phrasing-content にリストされているすべてのタグになります。 "html.format.unformatted": "", // ターミナルの開始時にロケール変数を設定するかどうかを制御します。OS X では既定で true になり、その他のプラットフォームでは false です。 "terminal.integrated.setLocaleVariables": false, "workbench.colorTheme": "peel", // emmet 省略記法を展開すべきでない言語の配列。 "emmet.excludeLanguages": [ "markdown", "slim" ], "workbench.iconTheme": "material-icon-theme", // 言語に対するファイルの関連付け (例 "*.extension": "html") を構成します。これらの関連付けは、インストールされている言語の既定の関連付けより優先されます。 "files.associations": { "*.sass": "scss" }, "window.zoomLevel": 0, "workbench.sideBar.location": "right" } |
あれ、それくらいか？？
治ったのかー！？これで治ったのか？！
とりあえずアップデートした。
先週末はたまたまネット環境のない所に滞在していたんだけど、
この不具合のせいで全く仕事にならなくて辛かった。
すんごいタイミングだったんだなぁ。
複数のgoogledriveを一緒に開きたくてodrive（https://www.odrive.com/）とか使ってたんですけど
たまに共有に落ちてこないファイルがあったりして使うの辞めました。
とはいえgoogle driveアプリは共有アイテムを拾ってくれなくて困ったなーって思ってたら
マイドライブに移せばローカルでも開けるんですね。
マイドライブに移したいファイルを選択して、右上のマイドライブに移すアイコンをクリックです
何世代ぶりかでDwを起動してみたんですけど、随分と装いが変わりましたね。。。
で、ソースフォーマットがなかなか見つからなかったのでメモ。
編集 – コード – ソースフォーマットの適用
いまだに、firefoxのfirebugに慣れすぎちゃってchromeに移行出来ないでいます。
ところが最近、console.log();が吐き出されない事があって数時間ハマってから
こりゃもうほんとに乗り換えねばならんね、と思ってたんですけど
Firefox Developer Editionつうのがあると教えてもらいました。
https://www.mozilla.org/ja/firefox/developer/
console.log();バッチリ動く。
まだしばらくfirefoxの厄介になりそうです。
敷居（ルール的な意味で）が高いけどモバイル用ページを超高速で表示する技術？だとか。
参考
モバイルウェブが爆速に！ GoogleがAMP (Accelerated Mobile Pages) を立ち上げ | 海外SEO情報ブログ
もうhtmlタグの書き方からして違うのね(・д・)
|
1 |
<html ⚡> |
とかカッコいいけど冗談かと思った。