フロントエンドの本を購入して勉強するぞーと思ったら、VSCodeが推奨されていた。
今まで尊敬する先輩がATOMだったのでずっとATOM使ってましたが、これを機に入れてみました。
環境：Windows10
仕事場で合間にちまちま設定してた。
インストール
Download for Windoes から64bit版をインストーラーをダウンロード。
何も設定変えずそのまま次へを連打でインストールしました。
設定
初期起動時、右下に日本語にできるよって機能がでてたのでインストールして再起動してもらいました。
細かいエディタ設定とかどうやるのか全く分からなかったのでぐぐりつつこんなかんじかな～で設定しました。
随時変更しています。
{
"extensions.ignoreRecommendations": true,// 拡張機能のおすすめを非表示
"workbench.colorTheme": "Atom One Dark",// 配色テーマ
"workbench.iconTheme": "vs-seti",// ファイルアイコンのテーマ
"workbench.editor.enablePreview": false,// タブのプレビュー機能
"workbench.activityBar.visible": true,// アクティビティバーを表示
"workbench.statusBar.visible": true,// ステータスバーを表示
"workbench.sideBar.location": "left",// サイドバーを左側に表示
"workbench.tips.enabled": false,// ファイルが開かれていないときのヒントを非表示
"workbench.editor.showTabs": true,// 開いているタブをすべて表示
"workbench.settings.enableNaturalLanguageSearch": false,// 自然文検索モード
"workbench.startupEditor": "none",// 起動時ページを空白のページ表示
"files.encoding": "utf8",
"files.eol": "\n",// 既定の改行文字
"files.autoGuessEncoding": true,//エンコード自動判別
"files.autoSave": "off", // 自動で保存
"editor.fontFamily": "Consolas, monospace",
"editor.fontSize": 14,
"editor.tabSize": 2,
"[twig]": {
"editor.tabSize": 4
},
"editor.insertSpaces": true,// タブキーをスペース入力
"editor.detectIndentation": false, //開いたファイルからインデントを自動判別
"editor.renderWhitespace": "all",//半角スペースを可視化
"editor.wordWrap": "on", // ウィンドウの端で改行する
"editor.renderControlCharacters": true, // 制御文字を表示
"editor.autoClosingBrackets": true,// 自動で閉じ文字、タグ、記号を挿入
"editor.folding": true,// 折りたたみ機能
"editor.cursorBlinking": "smooth",
"editor.renderLineHighlight": "gutter",
"editor.scrollBeyondLastLine": false,
"editor.wordSeparators": "`~!#%^&*()-=+[{]}\\|;:'\",.<>/?", // 文字の区切り（初期値 => "`~!@#$%^&*()-=+[{]}\\|;:'\",.<>/?"）
"editor.mouseWheelScrollSensitivity": 2,// スクロール量
"editor.minimap.enabled": true,// ミニマップを非表示
"editor.glyphMargin": false,// ブレークポイントを使用
"editor.mouseWheelZoom": false,// Ctrlキーとホイールで縮小拡大
"editor.links": false,// URLをクリック不可
"editor.formatOnPaste": true,//自動インデント
"breadcrumbs.enabled": true,//ファイルパンくず表示
"window.zoomLevel": 0,// Windows拡大率
"window.restoreWindows": "one",// 起動時に前回開いていたワークスペースを開く
//フォーマット
"html.format.wrapLineLength": 0, // HTML 1 行あたりの最大文字数 (0 = 無効にする)
"html.format.contentUnformatted": "pre, code, textarea, title, h1, h2, h3, h4, h5, h6, p, iframe, span, a",
"html.format.extraLiners": "", // head, body, /html タグの前に改行を入れない
"html.format.unformatted": null,
"git.autofetch": false,// Gitの自動フェッチを止める
"gulp.autoDetect": "off",// Gulp タスクの自動検出をオフ
"jake.autoDetect": "on",// Jake タスクの自動検出をオフ
"emmet.triggerExpansionOnTab": true,// Emmetをタブで発動する
"emmet.showExpandedAbbreviation": "always",// 常にEmmetを表示する
"emmet.showAbbreviationSuggestions": true,// Emmetの候補を表示する
"emmet.excludeLanguages": [// Emmetを発動しないファイル
"markdown",
"json"
],
// Windowsで実行するターミナルをGitBushに変更する (アンコメントして有効に)
// "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
// Git Lens 拡張機能の初期設定
"gitlens.advanced.messages": {
"suppressCommitHasNoPreviousCommitWarning": false,
"suppressCommitNotFoundWarning": false,
"suppressFileNotUnderSourceControlWarning": false,
"suppressGitVersionWarning": false,
"suppressLineUncommittedWarning": false,
"suppressNoRepositoryWarning": false,
"suppressResultsExplorerNotice": false,
"suppressUpdateNotice": false,
"suppressWelcomeNotice": true
},
//Auto closeのアクティヴ設定
"auto-close-tag.activationOnLanguage": [
"xml",
"php",
"blade",
"ejs",
"jinja",
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"plaintext",
"markdown",
"vue",
"liquid",
"erb",
"lang-cfml",
"cfml",
"HTML (Eex)",
"twig"
],
"gitlens.codeLens.enabled": false,// GitLensのファイル注釈機能を無効にする
"gitlens.currentLine.enabled": false,// GitLensの行注釈機能を無効にする
"php.validate.executablePath": "C:/xampp/php/php.exe",
"php.executablePath": "C:/xampp/php/php.exe",
"explorer.confirmDelete": false
}
20181002：コピペインデント維持"editor.formatOnPaste": true,に。なぜfalseにしてたのか。
ショトカ変更
整形：Ctrl + F → Ctrl + Alt + B
拡張機能
とりあえず入れたやつ。
ATOMはパッケージ入れすぎると重くなるけどVSはどないやろうか。
- Atom One Dark Theme
- Auto Close Tag
- Colorize
- HTML CSS Support
- HTML Snippets
- Japanese Language Pack for Visual Studio Code
- Sass
- Sass Lint
-
Twig←整形フォーマットがなかったので削除 - Wordpress Snippet
- GitLens
- PHP IntelliSense
-
Twig Language←追加←html拡張子のコメントアウトがtwigの適応されちゃうので削除 - Twig Language2←追加
- open in browse←追加（Alt + Bでクロムデフォでブラウザ開く）
- Vetur←追加、Vueのやつ
- Gulp Snippets
- Auto Rename Tag←タグを書き換えたら終了タグも書き換えてくれる！
- Ruby
- Slim
VSCodeの拡張機能
アイコンが表示されててどんな機能かなんとなくわかる。
アンインストール
最初の設定をする際検索で出たおすすめ設定をまるまるコピーしたのが原因か、
デフォルトショトカ（Ctrl + S で保存とか）が一切効かなくなってしまいVSCodeを2回アンインストールしました。
プログラムからアンインストールしても設定ファイルは他の箇所に残ってるので手動で消さないといけません。
通常にアンインストールしてから、下記2つを手動で削除します。念のため再起動もしました。
C:\Users\ユーザー名\.vscode
C:\Users\ユーザー名\AppData\Roaming\Code
VSCodeの良かったところ
噂通り起動が早い！ぱっ( ﾟДﾟ)てかんじ。
ATOMでは不具合か分かりませんが、ファイルのエンコーディング自動判別がされなく開くたび切り替えないといけなかった。
自動判別する設定とか調べたんですが、どうもうまくいかなかったです。
VSでは"files.autoGuessEncoding": trueでいけたので感動。
ATOMの何が好きかって、テーマのOne Dark。色使いが好きだったんです。
それがなんとVSCodeの拡張機能にテーマ入ってた・・・！！(´ω｀*)
あとターミナルが入ってた～
コマンドプロントだと移動できないフォルダがあってえ～？いいけど・・・ってことがあったんですが
（多分）どこでも移動できる！使うか分からんけど嬉しい！
まだ分からないところ
特定フォルダ内の一括置換がすんなりできなそう？
200ファイルくらいの特定記述を一括置換するタスクがたま～にあるんですが、いつもdreamweaverにやってもらってます。
dreamweaverは正規表現、改行込みも検索してくれるんですがVSでは一行検索が固定なのか、うまく検索できず・・・
改行も正規表現にしないとなのか・・・？\nや\tにしてもヒットせず、置換も複数行は無理そう。
dreamweaverからは完全移行とはならず。
ソース管理ってとこどう使えばいいのかしら。
新しいものってテンションあがるので、VSに完全移行でいいかなと思いatomアンインストしました。
自宅macもVSに。
使いこなせるようがんばろ。