hatakoya memo

VSCode

プラグイン

postcss-sorting

.postcssをソートできる。

使い方

  1. VSCode の設定ファイルにソート順を書く。 settings.json
{
  "postcssSorting.config": {
    "order": [
      "custom-properties",
      "dollar-variables",
      "declarations",
      "at-rules",
      "rules"
    ],
    "properties-order": [
      "display",
      "position",
      "top",
      "right",
      "bottom",
      "left"
    ]
  }
}
  1. F1 -> PostCSS Sorting: Run で実行。

キーボードショートカットにバインド

ctrl + k -> ctrl + s

Browser Preview

https://github.com/auchenberg/vscode-browser-preview

インストール

code --install-extension auchenberg.vscode-browser-preview

CLI

プラグイン管理

# プラグインの一覧
code --list-extensions
# インストール
code --install-extension ms-vscode.cpptools
# アンインストール
code --uninstall-extension ms-vscode.csharp

フォント

Roboto-mono

https://fontmeme.com/jfont/roboto-mono-font/

デバッグ

React + Next + TypeScript

.vscode/launch.jsonを作成する。

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

yarn devなどでアプリ起動後、ctrl + shift + Dから再生ボタンを押してデバック開始できる。

ref: https://code.visualstudio.com/docs/nodejs/reactjs-tutorial#_debugging-react

リモート開発

https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack

# 確認
Get-WindowsCapability -Online | ? Name -like 'OpenSSH*'

# OpenSSH.Clientが入っていなかったらインストールする
Add-WindowsCapability -Online -Name OpenSSH.Client~~~~0.0.1.0

Remove Develop 拡張機能を入れる

code --install-extension ms-vscode-remote.vscode-remote-extensionpack

~/.ssh/config

Host remote-dev
    HostName dev.remote.koya-it.com
    User cloud-user
    # 常にポートフォーワードしたいポートを書く
    LocalForward 127.0.0.1:3000 127.0.0.1:3000
    LocalForward 127.0.0.1:3000 127.0.0.1:3000

Ref: https://code.visualstudio.com/docs/remote/ssh#_always-forwarding-a-port

Ubuntu18.04 の GCE インスタンスを作る。 作るときに SSH 鍵を設定しておく。

GCE に yarn を入れる。

sudo apt install -y nodejs

sudo apt remove cmdtest yarn
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt update
sudo apt install -y yarn

webpack の watch のための設定

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

Ref: https://github.com/facebook/jest/issues/3254#issuecomment-297214395

ssh <user>@<host>で SSH 接続できることを確認する。

~/.ssh/configに SSH 認証の設定を書く。

Host GCE
    Hostname ***.***.***.***
    User hatakoya
    IdentityFile ~/.ssh/<ssh key name>

リモートサーバで動かすときはローカルにホットリロードを有効化するために webpack.config.js でhostに0.0.0.0を指定する必要がある。

module.exports = merge(common, {
  // ...
  devServer: {
    //
    host: "0.0.0.0",
    port: 2222
  }
  // ...
});

Ref: https://github.com/webpack/webpack-dev-server/issues/205

ローカル PC から SSH トンネルでlocalhostをつなぐ。

ssh -i ~/.ssh/<ssh鍵のファイル> -L <ローカルのポート>:localhost:<リモートのポート> <ユーザ名>@<リモートIP>

ブラウザからlocalhost:<指定したポート>で開けるようになる。

コンテナのシェルを sh から bash に変える

コンテナ側の設定ファイルに追記する。

{
  "terminal.integrated.shell.linux": "/bin/bash"
}

HMR 設定

-Dつけなくて大丈夫。

yarn add react-hot-loader

Ref: https://qiita.com/choro/items/ecddabf3ef36db29b4b0

使い方はルートコンポーネントをhot(module)()で囲むだけ。

const Index = hot(module)(() => (
  <React.Fragment>
    <p>Hello World!</p>
  </React.Fragment>
));

ReactDOM.render(<Index />, document.getElementById("app"));

ローカルのファイルをリモートへコピー

scpを使う。

scp -i ~/.ssh/<秘密鍵ファイル> -r <ローカルのフルパス> <リモートホスト>:<リモートのフルパス>

Markdown ファイル編集時に末尾空白がトリミングしないようにする

files.trimTrailingWhitespaceを全体に適用している場合は markdown ファイルだけ除外するように設定する必要がある。

"[markdown]": {
    "files.trimTrailingWhitespace": false
}

Ref: https://qiita.com/otera@github/items/d715f760aab2f6e88e67

ショートカットキー

基本

  • ^Space 補完

  • ⇑⌥F フォーマット。

  • ⌥+↑、⌥+↓ 現在の行を一行上（一行下）に移動

  • shift+⌥+↑ 現在の行を一行上にコピペ

  • shift+⌥+↓ 現在の行を一行下にコピペ

  • F2 シンボルのリネーム

  • F12 定義に移動

  • ⌥F12 シンボルを参照している箇所を表示

知ってたら便利

  • ⌘↑、⌘↓ 現在のファイルの先頭（末尾）に移動

  • ⌘L 現在の行全体を選択

  • ^⇑⌘→、^⇑⌘← 選択範囲を広げる（狭くする）

  • ⇑⌘O ファイル内のシンボルに移動。 @:を入力するとグループ化される。

  • ⌘T ワークスペース内のシンボルに移動。

  • ^G 好きな行番号に移動。ｖ

  • ⌘U カーソル位置を一つ前に戻す。

  • Option を押しながらスクロール 高速スクロール。editor.fastScrollSensitivityで速度を設定できる。

その他

  • ⌥⌘R 検索で正規表現の ON/OFF 切り替え

  • ⇑⌘V マークダウンプレビューを表示

  • ⌘K -> V マークダウンを編集画面とプレビュー画面に分割

拡張機能

  • Markdown All in One - yzhang.markdown-all-in-one

Live Share

必要な依存関係をインストールしておく。

sudo apt install libssl1.0.0 libkrb5-3 zlib1g libicu[0-9][0-9] gnome-keyring libsecret-1-0 desktop-file-utils x11-utils

Ref:
https://docs.microsoft.com/en-us/visualstudio/liveshare/reference/linux#install-linux-prerequisites

← MySQL →