フロントエンド開発

ターミナル#

よく使うコマンド#

ssh
scp
bat
ack
the_silver_searcher

コマンドラインショートカット #

Ctrl + a カーソルを先頭に移動
Ctrl + e カーソルを末尾に移動
Ctrl + u コマンドを削除
Ctrl + k 現在のカーソル以降のすべての文字を削除
Ctrl + w 前の単語を削除

Vim #

三つのモード
基本操作：移動、削除、コピー
エディタ

言語サーバープロトコル#

プロトコルの目的は、プログラミング言語のサポートを特定のエディタや IDE に依存せずに実装および配布できるようにすることです。

言語サーバープロトコル（Language Server Protocol、LSP）は、JSON-RPCに基づくオープンなネットワーク伝送プロトコルであり、ソースコードエディタまたは統合開発環境（IDE）と特定のプログラミング言語の機能を提供するサーバーとの間での相互作用に使用されます。このプロトコルの目的は、エディタや統合開発環境がより多くのプログラミング言語をサポートできるようにすることです

特徴

定義に移動（go to definition）
すべての参照を検索（find all references）
hover
補完
名前変更
フォーマット
リファクタリング
ハイライト
ファイル移動時のインポート更新
自動インポート

ユーザーが一 (ツールで呼ばれる) ドキュメントのファイルを開く：ツールは言語サーバーにドキュメントが開かれたことを通知します ("textDocument/didOpen")。これ以降、ドキュメントの内容はファイルシステム上ではなく、ツールがメモリ内に保持します。
ユーザーが編集を行う：ツールはサーバーにドキュメントの変更を通知し ('textDocument/didChange')、言語サーバーはプログラムの意味情報を更新します。この際、言語サーバーはこの情報を分析し、ツールに検出されたエラーと警告を通知します (textDocument/publishDiagnostics)。
ユーザーがエディタ内のシンボルに対して「定義に移動」を実行する：ツールは二つのパラメータを持つ "textDocument/definition" リクエストを送信します：(1) ドキュメント URI と (2) 「定義に移動」リクエストをサーバーに送信したテキスト位置。サーバーはドキュメント URI とシンボルの定義がドキュメント内の位置を使用して応答します。
ユーザーがドキュメントを閉じる (ファイル )：ツールは "textDocument/didClose" 通知を送信し、言語サーバーにドキュメントが現在メモリに存在しないことを通知し、ファイルシステム上の現在の内容が最新であることを知らせます。
JSON-RPC 伝送プロトコル

この場合のクライアントは通常、リモートシステムの単一のメソッドを呼び出すことを意図したソフトウェアです。複数の入力パラメータは配列またはオブジェクトとしてリモートメソッドに渡すことができ、メソッド自体は複数の出力データを返すこともできます。

リクエスト
- メソッド - String
- パラメータ - ObjectまたはArray
- ID
レスポンス
- 結果
- エラー
- ID

「textDocument/definition」リクエストの詳細を見てみましょう。以下は C++ ドキュメントにおける「定義に移動」リクエストのクライアントツールと言語サーバー間のペイロードです。

リクエストは次の通りです：

{
    "jsonrpc": "2.0",
    "id" : 1,
    "method": "textDocument/definition",
    "params": {
        "textDocument": {
            "uri": "file:///p%3A/mseng/VSCode/Playgrounds/cpp/use.cpp"
        },
        "position": {
            "line": 3,
            "character": 12
        }
    }
}

レスポンスは次の通りです：

{
    "jsonrpc": "2.0",
    "id": "1",
    "result": {
        "uri": "file:///p%3A/mseng/VSCode/Playgrounds/cpp/provide.cpp",
        "range": {
            "start": {
                "line": 0,
                "character": 4
            },
            "end": {
                "line": 0,
                "character": 11
            }
        }
    }
}

ユーザーが異なる言語を使用する際、VS Code は通常、各プログラミング言語の言語サーバーを起動します。

VS Code エディタ内の言語サービスは、エディタが複数のプログラミング言語をサポートできるようにする特別な拡張機能です。

エディタには、Typescript/JavaScript、html、css などの多くの言語サーバーが組み込まれており、他にも vetur のように拡張としてインストールできるものが多数あります。

VS Code#

VS Code 拡張#

VueDX
- 定義
  - コンポーネントの定義に移動
  - プロパティの定義に移動
  - 式の定義に移動
- 名前変更
  - プロパティの名前変更
  - データの名前変更
  - 計算プロパティの名前変更
  - メソッドの名前変更
  - setUp () 内の変数 / 関数の名前変更
  - コンポーネントまたは Vue ファイルの名前変更
File Utils
- 新しいファイル
- 新しいフォルダー
- ファイルを削除
- 複製
- 名前変更
- 名前をコピー
- 移動
advanced-new-file
Auto Rename Tag
Color the tag name
Live Preview
Tailwind CSS intelliSense
Volar

VS Code ショートカット

Chrome ブラウザ#

CSS デバッグ #

キーを使用して属性値のサイズを増減
- shift + 上 / 下: ±10
- Command(mac)/Ctrl (window)+ 上 / 下: ±100
- Alt(window)/option (mac)+ 上 / 下: ±0.1
ノードのスクリーンショットをキャプチャ（Capture node screenshot）
CSS クラスの追加、編集、削除。
- .cls
- enterキー
hキーで要素を素早く隠す

Chrome 拡張#

OneTab - すべてのタブをリストに変換
The Great Suspender 長時間使用していないウェブページを凍結し、システムリソースを解放します。
JSON Viewer
Site Palette
wappalyzer
Vimium

補助ツール#

vscodedev - オンライン vscode エディタ
regex - オンライン正規表現デバッグ

Cabbage

フロントエンド開発

ターミナル#

よく使うコマンド#

コマンドラインショートカット #

Vim #

言語サーバープロトコル#

VS Code#

VS Code 拡張#

Chrome ブラウザ#

CSS デバッグ #

Chrome 拡張#

補助ツール#

参考#

フロントエンド開発

ターミナル#

よく使うコマンド#

コマンドラインショートカット#

Vim#

言語サーバープロトコル#

VS Code#

VS Code 拡張#

Chrome ブラウザ#

CSS デバッグ#

Chrome 拡張#

補助ツール#

参考#

コマンドラインショートカット #

Vim #

CSS デバッグ #