vscodeでvueのeslint、prettier、stylelintの設定を行うzukucode主にWEB関連の情報を技術メモとして発信しています。codeで.vueや.jsで構文チェックやフォーマットを行うeslintとprettierの設定を行います。(2020年1月時点の情報です。以下の拡張機能をインストールします。Vetur.vueファイルを扱うために必要です。ESLinteslintをvscodeに組み込みます。Prettierprettierをvscodeに組み込みます。stylelintstylelintをvscodeに組み込みます。vscodeの設定vscodeで以下の設定を追加します。false,}npmパッケージのインストール以下のパッケージをインストールします。eslinteslint-config-prettiereslint-plugin-prettiereslint-plugin-vueprettierprettier-eslintstylelintstylelint-config-prettierstylelint-prettierまた、必須ではありませんが、検証ルールのセットなどをお好みでインストールします。eslint-config-airbnb-basestylelint-config-standardeslintの設定eslintの設定ファイルを作成し、以下の設定をします。ルールはそれぞれお好みで設定してください。}};prettierの設定prettierの設定ファイルを作成し、以下の設定をします。ルールはお好みで設定してください。'es5',};stylelintの設定stylelintの設定ファイルを作成し、以下の設定をします。ルールはお好みで設定してください。以上で設定ができましたので、一応vscodeを再起動して動作確認を行います。不要なカッコがある、セミコロンがない、インデントがおかしい、などのエラーに対してエラーが表示されることが確認できます。エラー箇所にマウスオーバーでエラー内容が確認できます。保存すると自動でフォーマットされることが確認できます。(私の環境だけかもしれませんが、保存処理Ctrl+sを何回もしなければ正しくフォーマットされないことがありました。フォーマットされない場合は何回もCtrl+sで保存処理をしてみてください。)vueファイルのhtmlやcss(scss)にもエラーチェックが動作し、保存時に自動フォーマットされることが確認できます。10で範囲を指定して画面のスクリーンショットを撮る方法を紹介します。画面全体の指定した部分のみを切り取ってクリップボードに保存します。10でクリップボードの履歴を複数管理して貼り付ける方法を紹介します。通常コピーした文字列は、別の値をコピーすると、最初にコピーした文字列は消えてしまいます。postcssを導入するwebpackでpostcssを導入してautoprefixerなどを行います。postcss-loaderはwebpackでpostcssを行うために必要です。lessをImportしてビルドするhtmlやbodyなどに適用するベースのクラスを外部のlessファイルに実装して、スタイルをサイト全体に適用したい場合があります。外部のlessファイルをモジュールとしてImportしてwebpack...webpack-dev-serverでhttpsでのアクセスを可能にする方法webpack-dev-serverでhttpsでのアクセスを可能にする方法を紹介します。外部APIのテストや、メディアデバイスのテストなどで、開発中のlocalhostをhttpsにする必要があると...ExtractTextPluginでcssファイルを出力するwebpackのプラグインExtractTextPluginを使って、ビルドされたjsファイルからstyleの部分を抽出してcssファイルで出力します。extract-text-webpack-plu...webpackの設定を開発環境と本番環境で変更するwebpack.config.jsで本番環境でのビルドのみコードを圧縮するなどの処理を設定したい場合があります。webpackの設定を開発環境と本番環境で変更する方法を紹介します。cross-envと...webpack-dev-serverで開発サーバーを起動するwebpack-dev-serverで開発サーバーを起動します。自分で作成したモジュールをインポートするときはインポートするファイルを基準に相対パスで指定する必要があります。フォルダ構成によっては深く階層を辿らないといけないので、フォルダ構成が変わってしまうと大変...webフォントがIE11で表示されない場合の対処法FontAwesomeなどのwebフォントがなぜかIE11のみ表示されないことがありました。システム日付をYYYYMMDD形式などの文字列型に変換する当ホームページに記載されている会社名・製品名・システム名などは、各社の登録商標、もしくは商標です。