Visual Studio Codeの初期設定（SCSS、Git、SFTP）

Visual Studio Code 必要な機能拡張

○ 必須
Japanese Language Pack for VS Code
Auto Close Tag
Auto Rename Tag
Bracket Pair Colorizer
Highlight Matching Tag
HTML Snippets
Color Info

○ 適宜
Copy Markdown as HTML
CSS Peek
Git Graph
gitignore
HTML CSS Support
HTML Escape Extension
Live Sass Compiler
Live Server
Open file from path
PHP Intelephense ※設定でUndefined FunctionsをOFFにして再起動
Rainbow CSV
SFTP
twig

○ テーマ
GitHub Theme (Darkを選択)
vscode-icons

○ vue.js
Vetur
vue

Scssのコンパイル設定

①ウィンドウ左下の歯車マーク> ②[設定]> ③機能拡張> ④Live Sass Compilerを表示
Live Sass Compile › Settings: Formats　にあるsettings.jsonをクリックして開く

"liveSassCompile.settings.formats": [
    {
        "format": "nested",
        "extensionName": ".css",
        "savePath": "~/../css"     ←追加
    }
],

liveSassCompile.settings.formatsを上記に変更

"liveSassCompile.settings.generateMap": false,

Mapが不要な場合は、liveSassCompile.settings.generateMapをtrueからfalseに
保存して閉じる

ファイルを開くとWatch Sassというアイコンがあるので、クリックすると起動します。
保存するたびにscssフォルダと同階層のcssフォルダに同名.cssが保存されます。

Gitを作成しリモートリポジトリをbacklogに設定

ターミナルでグローバルにgitが入っているかの確認

$ git --version

なければHomebrewでgitをインストール
$ brew install git

gitに氏名とメールアドレスを設定
$ git config --global user.name  自分の名前
$ git config --global user.email 自分のemail

ウィンドウの左アイコンからgitを選択

リポジトリの初期化をクリック
リポジトリの選択画面が出てくるので、いま開いてるフォルダを選択

初期のコミットを行う

歯車のアイコンをクリック
Remote Configurationを編集
name: backlog
Fetch URL: https://メールユーザー名%40メールドメイン@バックログのスペース名.backlog.jp/git/AAA/bbb.git
%40は@のこと
例）https://usr%40gmail.com@test.backlog.jp/git/PROJECT-A/pro-a.git

[・・・]ボタンから「プル、プッシュ」を選択し「プッシュ先...」を選択しクリック
最初はbacklogのパスワードを入れなければいけない。

SFTPの設定

ルートに不可視フォルダ.vscodeを作成、その中にsftp.jsonを入れる。

不可視フォルダ・ファイルを表示するのは ⌘ + Shift + .

{
  "protocol": "sftp",
  "port": 10022,
  "host": "サーバ名.xsrv.jp",
  "username": "ユーザ名",
  "privateKeyPath": "~/.ssh/xxxx.key",
  "remotePath": "/home/サーバ名/ドメイン名.com/public_html/",
  "passphrase": "パスフレーズ",
  "uploadOnSave": false,
  "ignore": [
      "**/.vscode/**",
      "**/.history/**",
      "**/.git/**",
      "**/.DS_Store"
    ]
}

xserverの場合のsftp.jsonの中身


やむを得ずFTPで接続しなければならない場合、

{
  "protocol": "ftp",
  "host": "ftp-****.heteml.net",
  "username": "ユーザー名",
  "remotePath": "/wp-content/themes/",
  "password": "パスワード",
  "uploadOnSave": false,
  "ignore": [
      "**/.vscode/**",
      "**/.history/**",
      "**/.git/**",
      "**/.DS_Store"
    ]
}

hetemlの場合のsftp.jsonの中身