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のコンパイル設定
"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
リポジトリの初期化をクリックリポジトリの選択画面が出てくるので、いま開いてるフォルダを選択
初期のコミットを行う
歯車のアイコンをクリック
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を入れる。
{
"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の中身