vscodeでeslintとprettierを設定する正しい方法

ESlint

ESLintは、構文検出ツールです。JavaScript自体が柔軟で動的な言語であるため、1000人のJavaScriptorに対して1000通りの書き方が存在します。他の人のコードを理解しやすくするため、そして素早くスピードアップするために。

説明

プロジェクトを開発するとき、多くの場合は eslint でコード形式をチェックし prettier は、コードの書式設定に使用されます。このブログの記事では、以下の使い方を中心に説明します。 vscode を開発するために vue を開発する際に eslint と prettier の構成になります。

vscodeインストールプラグイン

まず、プラグインを vscode オン eslint と prettier プラグインを使用します。

プロジェクト内の設定ファイル

vueプロジェクトでは .eslintrc.js ファイルは、主に eslint に関連する設定を行います。

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
  parserOptions: {
    parser: "babel-eslint",
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    quotes: ['error', 'single', { allowTemplateLiterals: true }], // single quotes Allow backquotes
    semi: ['error', 'never'], // disallow semicolons at the end
  },
};

その他のeslintのルールは、以下をクリックしてください。 こちら をご覧ください。

.prettierrc.js ファイルが担当します。 prettier のルールセットです。

<イグ

module.exports = {
  tabWidth: 2, // tab
  semi: false, // no semicolon at the end
  singleQuote: true, // use single quotes
  bracketSpacing: true, // object properties with spaces before and after
  disableLanguages: ['vue'], // don't format vue files
}

プリティア

prettierはコードフォーマットプラグインです。構文が正しいかどうかは気にせず、シングルクォートを使っているか、文末にセミコロンを使っているかなど、コードの書式設定のみを行います。

について prettier より詳細なルールについては こちら をご覧ください。

自動書式設定の保存

を表示させたい場合は vscode ファイルを保存すると同時に自動的にフォーマットされるようにするには、次のように設定で設定します。

または settings.json また、以下のように付け加えると、書式を保存することができます。

vscode configuration eslint and prettierに関するこの記事が全てです。vscode configuration eslint and prettierに関するより多くのコンテンツは、スクリプトハウスの過去の記事を検索するか、以下の関連記事を引き続き閲覧してください 今後ともスクリプトハウスをよろしくお願いします