VSCodeプロフィール-反応風味

17757 ワード
react testing productivity vscode テキストリンク
VSCodeは、それは素晴らしいツールだが、私のために、言語やワークスペースに応じて拡張/無効にするには重要な設定を欠落していないVSCode.
ほとんどの私は、別の言語でのプロジェクトの間に一日中ジャンプし、私は多くの拡張と設定の各シナリオのリソースを消費する無駄です.各プロジェクトに手動で無効にすることができますが、新しいものを作成する場合は、再度それをすべてする必要があります.それは時間の浪費だ.
VSCodeチームが解決する間、我々は少しの回避策を使うことができます.そして、反応開発のために我々の専用のプロフィールをつくります.
複数のシナリオで使用する拡張子を共有することができます.しかし、私は、速い設定構成に賛成してディスク上の小さいスペースを逃すことを好みます.

クリエイトプロファイル


拡張子とデータ用の新しいプロファイルフォルダを作成します--extensions-dir and --user-data-dir パラメータ.
OS
コマンド
マックcode --extensions-dir "$HOME/.vscode/profiles/react/extensions" --user-data-dir "$HOME/.vscode/profiles/react/data"Linuxcode --extensions-dir "$HOME/.vscode/profiles/react/extensions" --user-data-dir "$HOME/.vscode/profiles/react/data"勝利code --extensions-dir "%HOMEPATH%/.vscode/profiles/react/extensions" --user-data-dir "%HOMEPATH%/.vscode/profiles/react/data"

⚠️ WSL2 does not support --extensions-dir or --user-data-dir flags


使い方


あなたはクレイジーですか?我々は、この長いコマンドを書いて、我々が反応で仕事をするたびに記憶する必要がありますか?
いいえ、もちろん.

MacOS / Linuxについて


この経路で$HOME/.vscode/profiles/react/ download このイメージ:

別名


そのような場合、別名は我々の親友でありえます.オープンユア.zshrc or .bash_profile ペーストします.
alias code-react="code --extensions-dir \"$HOME/.vscode/profiles/react/extensions\" --user-data-dir \"$HOME/.vscode/profiles/react/data\""
ファイルを保存し、ターミナルウィンドウを再起動します.これで、vscodeでフォルダプロジェクトを開くことができますcode . コマンドは、今、あなたが反応を使用して動作する場合code-react . 代わりに.

ドックランチャー


同じパスで、ファイルを作成しますcode-react.command このコードを
open -n -a "Visual Studio Code.app" --args --extensions-dir="$HOME/.vscode/profiles/react/extensions" --user-data-dir="$HOME/.vscode/profiles/react/data"
保存して許可を実行するchmod +x code-react.command .
コピーするicon-react.png クリップボード上のコンテンツ.これを行う一つの方法はプレビューで画像を開くことですEdit > Select All , 次に選択Edit > Copy またはプレスCommand-C .
絹篩で篩うたようcode-react.command ファイルを選択File > Get Info . 「情報」ウィンドウの上部にあるアイコンをクリックして選択し、選択しますEdit > Paste またはプレスCommand-V .
絹篩で篩うたようcode-react.command ファイルを選択File > Make Alias またはプレスCommand-L Vscodeの反応として名前を付けます.ちょうどドラッグしてドックやデスクトップにこの別名のショートカットをドロップします.

Recommended configurations: Open a terminal window, go to 'Preference > Profiles. Set Auto close terminal on exit: inside 'Shell' tab, select "Close if the shell exited cleanly" on "When the shell exits" option.


Windowsで


この経路で%HOMEPATH%/.vscode/profiles/react/ download このアイコン

ショートカット


同じパスで、ショートカットファイルを作成し、これらのプロパティーを設定します.
名前:VSCode Reactターゲットの設定
"C:\Users\%USERNAME%\AppData\Local\Programs\Microsoft VS Code\Code.exe" --extensions-dir "%HOMEPATH%/.vscode/profiles/react/extensions" --user-data-dir "%HOMEPATH%/.vscode/profiles/react/data"
次のように起動します.
"C:\Users\%USERNAME%\AppData\Local\Programs\Microsoft VS Code"
そして、以前にダウンロードしたアイコンを使ってください.

Sadly on Windows create an alias it slightly more complicated than macOS/Linux, then you only can open it using the shortcut and can't open it directly from the project path. But if you are using WSL you can use the same alias approach from mac/linux.


色


あなたのVSCodeとあなたの反応風味のVSCodeバージョンを使用しているときに認識するのは良いことでしょう.
{
    "workbench.colorCustomizations": {
        "activityBar.background": "#00d8ff",
        "activityBar.foreground": "#000000",
        "activityBar.inactiveForeground": "#00000099",
        "activityBarBadge.background": "#6dffff",
        "activityBarBadge.foreground": "#000000",
        "statusBar.noFolderBackground": "#00a6cc",
        "statusBar.background": "#00d8ff",
        "statusBar.foreground": "#000000",
        "statusBarItem.hoverBackground": "#00a6cc"
    }
}
/vscode/設定JSON

以上です.今では設定と拡張機能をインストールしたいのです.それらは私のお気に入りの推薦です.

拡張


エディタ

  • DotENV
  • Template String Converter
  • npm Intellisense
  • Path Intellisense 
    • {
    "javascript.suggest.paths": false,
    "typescript.suggest.paths": false
}
    /vscode/設定JSON
  • IntelliSense for CSS class names in HTML
  • React Preview
  • Sapling

    • デバッグ


    VSCODEからデバッグ反応のための余分の拡張をインストールする必要はありません.
    {
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}"
        }
    ]
}
    /. vscode/起動JSON
    実行するたびにブラウザを開くのを無効にしたい場合npm run start コマンドを追加BROWSER=none on .env プロジェクト内のファイル.

  • Turbo Console Log 
    • {
    "turboConsoleLog.logMessagePrefix": "DEBUG -> "
}
    設定.JSON

    プリンタ

  • HTMLHint

    • スニペット

  • Arrow Function Snippets
  • ES7 React/Redux/GraphQL/React-Native snippets
  • Simple React Snippets

    • スタイル

  • Autoprefixer
  • CSS Modules
  • CSS Peek
  • CSS Variable Autocomplete
  • language-stylus

    • テスト

  • Jest Snippets
  • Test Explorer UI + Jest 
    • {
    "testExplorer.errorDecoration": true,
    "testExplorer.errorDecorationHover": true,
    "testExplorer.useNativeTesting": true
}
    /vscode/設定JSON
  • Code Coverage Highlighter
    • そして、coverage フォルダ.gitignore ファイル.

    同期


    私は1つ以上のGitHubユーザーアカウントを使用することができますし、プロファイルを作成することはできませんので、組み込みのvsCodeシンクオプションの大ファンではない.
    しかし、心配しないで、我々はよく知られて使用することができますSetting Sync 拡張.
    どうぞcreate another GitHub account , 追加-react あなたのユーザ名と+react あなたのGmailアカウントに.

    このトリックを使用すると、新しい電子メールアカウントを作成せずに別のGithubアカウントを持つことができます.ちょうどあなたの新しいusername-react アカウントとVail il、あなたの反応風味のVSCodeのバージョンは、複数のデバイス間で同期することができます.

    拡張子


    Chromeのデバッグツールが必要になります.
  • React Developer Tools
  • Redux Devtools

    • ボーナストラック


    この恒星プロジェクトのセットアップをリンギング、自動化や他の退屈なタスクを自動化することを忘れないでください.

    強力なプロジェクトのセットアップ

    カミロマーチネス・ Jun 9 ' 21・ 5分読む

    #react #vscode #productivity #testing

    それはすべての人々です!
    ハッピーコーディング🖖
    LAMP-PCH 7の設置、配置、環境変数、起動と停止
    [BOJ 1436]映画監督