乱雑モックアップ

チームで作業する場合、ソースマップ普通に便利かも。
てか必須かも。

いままでは
1）cssからscssを辿るのはそんなに大変でもない
2）もしSassファイル内での行番号を知りたい時は、ラインコメントを出力すればいい

みたいな感覚でいたんですけど
cssを見ればscssのどこか判ると言っても、20〜30を超える数の.scssを@importしたサイトになると流石に骨（心）が折れるし
ラインコメントなんてのは論外で、例えば改行の仕方が違う人がscssを編集するだけで
gitが反応しまくるので非常に面倒臭いってのが実際。

けれどもソースマップならば！

開発者ツールで直接scssのどこかに書いてあるのかが判るので、使わないより使った方が断然早い。

もし直接cssが見たいようて時は
ブラウザの設定を変更すれば切り替えられるので
安心安心

最近のエディタは、完全にVisual Studio Codeな気分です。100％は満たされないけど、かなりいいですねこれ。
codaからほぼ完全に乗り換えました。

悩みの種だった、ソースフォーマット時にspanの内側がフォーマットされない件も解決。

設定（ツールバーの「Code＞基本設定＞設定」）のこうなってる部分を

  // 再フォーマットしてはならないタグの、コンマ区切りの一覧。'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",

// 再フォーマットしてはならないタグの、コンマ区切りの一覧。'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",

こうする。

"html.format.unformatted":"",

1	"html.format.unformatted":"",

追記：2017-08-06）最近はsvgを追加した

"html.format.unformatted":"svg",

1	"html.format.unformatted":"svg",

あと最近のアップデート後に言語設定が英語に戻ってしまったので、
enをjaに書き換えました。

cmd + p
>configure language

1 2	cmd + p >configure language

{
  // 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"
}

{

// 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"

}

これで日本語に戻る。

その他自分がよく使う機能

diff

cmd + p
>compare

diff

cmd + p

>compare

設定

{
  // 新しいファイルに割り当てられる既定の言語モード。
  "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"
}

{

// 新しいファイルに割り当てられる既定の言語モード。

"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,

"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"

}

あれ、それくらいか？？

乱雑モックアップ

photoshopでカンバスの端っこを画面の中央に持ってきたい時

環境設定>ツール>オーバースクロール

今更知るscssのソースマップの存在意義

けれどもソースマップならば！

Visual Studio Code、慣れてきた。

その他自分がよく使う機能

設定

えー！Coda2.6.2がオフライン環境だと落ちて使い物にならなかったのはPanic Syncのせいだったのかい？

google driveの共有アイテムにあるファイルをマイドライブに移す

Dreamweaver CC 2017のソースフォーマットの場所

Firefox Developer Edition

最近の投稿

カテゴリー

環境設定>ツール>オーバースクロール

けれどもソースマップならば！

その他自分がよく使う機能

設定

最近の投稿

よく見られているページ

カテゴリー