🌟

my vscode settings.json

5 min read 3

VSCode meetup に向けたポエムです。おすすめの設定ではなく自分の.vscodeを晒す会!

https://vscode.connpass.com/event/204791/

いろいろと拡張機能やらググって出てきたおすすめ設定などをやっているはずだが自身で理解してなかったので改めて理解してみた。

記事を書いた初期

{
    "workbench.startupEditor": "newUntitledFile",
    "editor.formatOnType": true,
    "editor.suggestSelection": "first",
    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
    "trailing-spaces.trimOnSave": true,
    "[html]": {
        "editor.defaultFormatter": "vscode.html-language-features"
    },
    "editor.renderControlCharacters": true,
    "[php]": {
        "editor.defaultFormatter": "bmewburn.vscode-intelephense-client"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[css]": {
        "editor.defaultFormatter": "aeschli.vscode-css-formatter"
    },
    "python.jediEnabled": false,
    "[scss]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "python.languageServer": "Microsoft",
    "emmet.includeLanguages": {
        "erb": "html",
        "vue": "html",
        "vue": "css",
    },
    "dart.flutterSdkPath": "/Users/takuya/Development/flutter",
    "[dart]": {
        "editor.formatOnSave": true,
        "editor.formatOnType": true,
        "editor.rulers": [
            80
        ],
        "editor.selectionHighlight": false,
        "editor.suggest.snippetsPreventQuickSuggestions": false,
        "editor.suggestSelection": "first",
        "editor.tabCompletion": "onlySnippets",
        "editor.wordBasedSuggestions": false
    },
    "beautify.config": ""
}

理解のために整理した後

{
    "workbench.startupEditor": "newUntitledFile", // VSCode起動時にUntitledの新規ファイルを表示

    "editor.formatOnType": true, // 最後にセミコロンを打つとスペースなどを綺麗にしてくれるらしい
    "editor.suggestSelection": "first", // 入力候補の1番目を最初に選択しておく
    "editor.renderControlCharacters": true, // 制御文字を表示させる

    "emmet.includeLanguages": { // デフォルトではサポートされないEmmetを適用させる
        "erb": "html",
        "vue": "html",
        "vue": "css",
    },

    // 拡張機能
    //// Visual Studio IntelliCode
    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue", // suggestSelectionの設定を上書きさせる

    //// Trailling Spaces
    "trailing-spaces.trimOnSave": true, // 上書き保存したときに文末のスペースを削除

    //// Python
    "python.jediEnabled": false, // 変わったかも?PythonのIntelliSenseのエンジンにJediを使うか
    "python.languageServer": "Microsoft",

    //// JS Beautify
    "beautify.config": "", // 独自設定ファイルへのパス

    // 言語
    "[html]": {
        "editor.defaultFormatter": "vscode.html-language-features"
    },

    "[php]": {
        "editor.defaultFormatter": "bmewburn.vscode-intelephense-client"
    },

    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },

    "[css]": {
        "editor.defaultFormatter": "aeschli.vscode-css-formatter"
    },

    "[scss]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },

    "dart.flutterSdkPath": "/Users/takuya/Development/flutter",
    "[dart]": {
        "editor.formatOnSave": true,
        "editor.formatOnType": true,
        "editor.rulers": [
            80
        ],
        "editor.selectionHighlight": false,
        "editor.suggest.snippetsPreventQuickSuggestions": false,
        "editor.suggestSelection": "first",
        "editor.tabCompletion": "onlySnippets",
        "editor.wordBasedSuggestions": false
    },

}

特筆したい設定項目

editor.renderControlCharacters

これ!今思えばAtomからVSCodeに乗り換えたきっかけかもしれない!ブログに書いたけどMacのAtomで全角スペースなどの変な不可視文字が入ってしまいクレームをもらったことがあった‥。あれは嫌な思い出でAtomは初心者に優しくて色味も好きだったけど、速度も早いとのことでVSCodeに乗り換えた。

https://miraiteki.life/develop/2018/post-62/

vsintellicode.modify.editor.suggestSelection

この設定項目自体はVisual Studio IntelliCode 拡張機能を使う上でのおまじないっぽいが、この拡張機能、Python, TypeScript/JavaScript, Java のコードをAIが理解してアシストしてくれる拡張機能らしい!すげー(こんなん入れたっけってくらいPythonやJavaなんて書きません‥)。

"trailing-spaces.trimOnSave": true

Trailling Spaces 拡張機能で上書き保存したときに文末のスペースを削除する。しかし今見たらこの拡張はUnableにしてた。たしか保存した時に、文末削除ができてなかったりで変更してないコードがgitコミットに含まれちゃうのが嫌で停止した記憶がある。

"python.jediEnabled": false

拡張機能PythonにてIntelliSenseエンジンにJediを使うか。IntelliSenseというのはどうやら「コードを書く時にサポートしてくれる賢いやつ」的な一般用語っぽい。Jediがデフォルト。

ただ確認したら"python.languageServer"に設定が変わったんじゃないかと思えるのだが‥。昔はJediを使わないとMicrosoft Python Analytics Engine になるが、今は選択肢が増えて下記のプルダウン式の項目しかなかった。

いずれにしてもVSCodeのLanguage ServerはJediがデフォルトだが、Microsoftに変えた方がいいらしい!

https://qiita.com/chelproc/items/bb23cab019bd525a3e00

Jediって誰?

ジェダイと読むらしい!

Jediは、IDE /エディタで使用できるPython用の静的解析ツールです。 その歴史的な焦点はオートコンプリートですが、今のところ静的分析も行います。
https://githubja.com/davidhalter/jedi

"emmet.includeLanguages"

Railsで構築する時に「erbファイルだとHTMLの補完が効かねぇ!」ってことがあったから入れた設定のはず!

 "emmet.includeLanguages": {
        "erb": "html",
        "vue": "html",
        "vue": "css",
    },

困っていること

MacのCtrl+KCtrl+Yをしたい!

コピペというよりはやり直しの機能である。XcodeではこれができるのだがVSCodeでは調べてもやり方がでてこなくて不便である。

何か書きにくい!(言語化しろ

でも何か色々Qiitaとかでおすすめの拡張設定いれても、Railsで<% %>とかパッとかけない。あとHTMLもEmmetで保管してもらったあとに改行してほしいタグとそうじゃないタグがある。

例えば<div>は補完後にこうなってほしい。

	<div>
	    | <!-- ここにタブが一段落ちてカーソルがきてて欲しい -->
	</div>

けど<li>なんかは改行しないで欲しいときが多い。

	<ul>
		<li>hogefuga</li>
	</ul>