GRAPHHOME暮らしフィルムコンパクトカメラネガフィルム一眼レフカメラ中判カメラポートフォリオデジタル●おすすめネガフィルムホーム暮らしPrettierとstylelintの連携と設定方法2021年1月24日SHAREツイートシェアはてブLINEPocketスポンサーリンクVSCodeに拡張機能をインストールVSCodeにPrettierとstylelintの拡張機能をインストールして、settings.jsonに記述することで保存時の自動フォーマット&CSSの構文チェックをすることができます。HTMLなど多くの言語に対応している定番のコードフォーマッター。保存時に自動フォーマットが可能。SCSSなどの構文のルールチェック、修正を行うリンター。自動フォーマットとCSSの簡易的なルールチェックしかできません。CSSの構文の自動修正やオリジナルのルールカスタマイズ、さらにSCSSの構文チェックにも対応させるには、npmパッケージをインストールしてstylelintの設定ファイルを作成する必要があります。Node.jsをインストール初めにPCにNode.jsが入っているかを確認します。macからターミナルを起動。foundが表示されたらNode.jsをインストールします。Node.js公式ページから推奨版をダウンロード。Node.jsをインストールすると、npmも同時にインストールされます。-versionの略でバージョン取得の意味。-yと入力しEnterを押すと、package.jsonが作成されます。同時にpackage-lock.jsonというファイルも作成されます。initなら、各質問にEnterを入力して回答。initはinitializeの略で、初期化という意味。パッケージをインストール必要なパッケージをインストールします。--save-devの略。SCSS対応の構文ルールの基盤.stylelintrc.jsonを作成する.stylelintrc.jsonファイルを作成し、以下のコードをJSON形式で入力します。]}.stylelintrc.jsファイルなら、JavaScript形式で記述します。.jsファイルはコメントの記述が可能です。["stylelint-scss"]の記述は不要。stylelint-config-recess-orderは他の設定を上書きするように、extends配列の一番最後に記述。コメントをキャンセルメールアドレスが公開されることはありません。