Visual Studio Code に関するメモ

Cat WEBサイト構築 by cubismer
Editor

Visual Studio Codeに変えようと設定中に問題に遭遇したのでメモとして残します。設定箇所がわかりづらい…。

自動整形

[php cs fixer]PHPの整形
  • php cs fixerだけでいい(大文字のPHP CS Fixer要らない？)
  • editor.formatOnSaveがあるとphp-cs-fixer.onsaveを書いても効かない
  • 細かいルールはphp-cs-fixer.configを書いて設定ファイルのフルパスを記載して対応する

// VSCodeのconfig.jsonには以下のように記載
// ファイル名は.php_csか.php_cs.dist
// パスはフルパスで、以下の例では.vscodeディレクトリにいれた場合
"php-cs-fixer.config": "~/.vscode/.php_cs.dist",


<?php
// 以下参考URL
// https://github.com/FriendsOfPHP/PHP-CS-Fixer#config-file
// https://mlocati.github.io/php-cs-fixer-configurator/#version:2.16
// https://qiita.com/suin/items/4242aec018d086312fe7
return PhpCsFixer\Config::create()
  ->setRiskyAllowed(true)
  ->setRules([
    '@PSR2' => true,
    'align_multiline_comment' => true,
    'array_syntax' => ['syntax' => 'short'],
    // 省略
    'yoda_style' => ['equal' => false, 'identical' => false],
    // 参考URLの設定で、WP用のコメント内@packageが消えた場合は以下が影響している。削除すれば消えなくなる。
    'general_phpdoc_annotation_remove' => ['annotations' => ['class', 'package', 'author']],
    'phpdoc_no_package' => true,　

  ])
  ->setFinder(PhpCsFixer\Finder::create()
    ->exclude('vendor')
    ->in(__DIR__)
  )
;
[Beautify]CSSの空行
  • 宣言ブロック終わり(中括弧が閉じる時)の改行後に空行が挿入される
  • setting.jsonに"newline_between_rules": falseを追加すれば意図通りになる

//setting.jsonへは、「環境設定」から「Beautify」を検索して出てくるテキストリンクからなどでいける。キーボードショートカットでももちろんOK。
{
    "editor.suggestSelection": "first",
    //中略
    //以下を追加
    "beautify.config": {
        "css": {
            "newline_between_rules": false,
        }
    }
}
[Beautify]インデントの設定
  • インデントをスペース2つにして自動整形すると、タブ2つ分のスペース4つになる
  • beautify.configに"indent_size": 2と書けば意図通りになる。
  • Editor: Detect Indentationはfalseにしなくてもいい

//setting.jsonへは、「環境設定」から「Beautify」を検索して出てくるテキストリンクからなどでいける。キーボードショートカットでももちろんOK。
{
    "editor.suggestSelection": "first",
    //中略
    //以下を追加
    "beautify.config": {
        "indent_size": 2
    }
}
[Beautify]JS内のJSX記述のreturn内のタグが変な形に改行される

//以下を記述する
return (
  <p>
    text
  </p>
);
//以下のように整形されてしまう
return ( <
  p >
    text <
  /p>
);

上記問題が発生したが調べてもわからず、Beautifyの設定を端から試し、以下で対応できることを確認。


"beautify.config": {
  "js": {
    "e4x": true,
  },
},

公式のGitでは以下のように記述あり。

[Boolean] Pass E4X xml literals through untouched.
false

e4xの設定は、今は廃止されたXMLサポート用のプログラミング言語拡張の「E4X」の記述をそのまま通すための設定らしいので、なぜこれで改善されるのかは不明。

以下のページが類似かもしれないが、2017年のバグですでに解決済みのはず。

E4Xの記述は少なくともWPにはないと思うので、trueにしても問題は起きないはず。

[PostCSS Sorting]CSSのソート

「CSScomb」は拡張機能の説明ページのリンク切れ(http://csscomb.com/config/ドメインを手放している?)があったりで不安なため「PostCSS Sorting」を試す

setting.jsonに以下のように記述。orderだけではなくproperties-orderも書かないと動作しない。


{
  "postcssSorting.config": {
    "order": [
      "custom-properties",
      "dollar-variables",
      "declarations",
      "at-rules",
      "rules"
    ],
    "properties-order": [
      "display",
      "position",
      "top",
      "right",
      "bottom",
      "left"
    ]
  }
}
Autoprefixer(3.0.0)のブラウザ設定
  • autoprefixer.browsersという設定項目はないので、autoprefixer.optionsのoverrideBrowserslistを使う
  • ただし、この方法もあまり推奨されない模様。package.jsonや.browserslistrcを使い、他のエクステンションも含めた全体的なターゲットブラウザ設定にするべきという方針のため?

//setting.jsonに以下のように追加
{  
  "autoprefixer.options": {
    "overrideBrowserslist": [
      "> 1% in JP",
      "last 2 versions",
      "ie >= 10",
    ]
  }
}

//https://github.com/mrmlnc/vscode-autoprefixer/blob/3082615e109f3035e256cf3a280537a8a164880d/test/.vscode/settings.json
//overrideBrowserslist ではなく上記URLに書かれていた browsers でも動作を確認したが、マニュアルには記述が見当たらないので使用し続けられるかは不明
//しかしbrowsersの方が正規？  https://teratail.com/questions/261398
{  
  "autoprefixer.options": {
    "browsers": [
      "> 1% in JP",
      "last 2 versions",
      "ie >= 10",
    ]
  }
}

検索で調べると以下のようなコードばかり出てきますが、これを書くと不明な構成設定と利用できるクイックフィックスはありませんという警告がでて反映されない。


"autoprefixer.browsers": [
  "> 1% in JP",
  "last 2 versions",
  "ie >= 10",
],

以下参照のこと。

Autoprefixer(3.0.0)のdisplay:gridに関する指定

"autoprefixer.options": {
  "grid": true,
},

上記のように書かないとdisplay:grid;を記述しても動作しない。girdのAutoprefixerが効かない場合はこの点を要確認。

Prettierに関して

自動整形としてはPrettierがよく紹介されていますが、HTMLの整形では以下が気に入らず使用をやめました。

  • HTMLでspanタグの折り返しがおかしい場合がある(開始タグの>の直前と、終了タグの<の直後で改行される)
  • "html.format.unformatted": "span"で改善可能ではあるが、これを設定しないといけない時点で好ましく思えない

特定のタグの自動整形自体を解除しないといけないのはどうなんだろうと(他に方法があるのかもしれませんが見つけられず)。

Markdown

結び

まだ全然使えていませんが、VScode便利です。

ですが便利ゆえに不便と言うか、何がどう行われているのかを把握しきれず、設定通りの動きなのに不具合に見えてしまいます。

慣れないと足元を掬われそうに感じました。

3人がこの記事を評価

役に立ったよという方は上の「記事を評価する」ボタンをクリックしてもらえると嬉しいです。

連投防止のためにCookie使用。SNSへの投稿など他サービスとの連動は一切ありません。

コメント欄