vscode で eslint と pretty を使用する方法の簡単な分析

#vscode で eslint と pretty を使用する方法は?以下の記事では、vscode での eslint の使い方と、eslint と prettier の組み合わせについて紹介します。

1. vscode での eslint の使用

1) まず vscode に eslint をインストールし、次に vscode の settings.json に次のコードを追加します

"editor.formatOnSave": true, // 保存是格式化
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true // 按照eslint规则格式化
},
"eslint.format.enable": true, // 启用ESLint作为已验证文件的格式化程序

2) eslint はプロジェクトにインストールする必要があります (またはグローバルにインストールする)

これは、vscode の eslint プラグインの要件です: [推奨学習: 「

vscode Getting Started Tutorial」 "]

3) ルート ディレクトリに .eslintrc.js ファイルを追加し、次のコードを追加します。

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ["eslint:recommended"],
  parserOptions: {
    parser: "babel-eslint",
  },
  rules: {}
};

4) ルールの設定

quotes: [
   'error',
   'single'
],

semi: ['error', 'never']

属性値配列の最初の要素の設定

属性値配列の 2 番目の要素の設定

eslint.bootcss.com/docs/rules/ 対応する属性を見つけてクリックして入力し、オプションを見つけます

eslint:recommendedデフォルトのルールはマークされています

注: この時点で、プロジェクトはデフォルトの設定とルールのルールに従ってプロンプトが表示されます。また、保存時に eslint ルールに従ってフォーマットされます。

2. eslint を prettier と組み合わせて使用​​します

(注: eslint と prettier の組み合わせは状況によって異なり、必ずしも prettier と併用する必要はありません)

1) まず、vscode に prettier プラグインをインストールし、vscode の settings.json に次のコードを追加します。 ##

"editor.defaultFormatter": "esbenp.prettier-vscode",

  "[javascript]": {

    "editor.defaultFormatter": "esbenp.prettier-vscode"

  }

2) prettier をインストールします

# をプロジェクトに追加し、eslint-plugin-prettier

と

eslint-config-prettier をインストールする必要があります。これら 2 つのプラグインの目的は、eslint を有効にすることです。 prettier のルールに従ってプロンプトを表示します (これら 2 つのプラグインのバージョン番号の問題に注意してください。最新の eslint-plugin-prettier バージョン 4.0 を使用すると問題が発生します)

"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^3.3.1"

次に、plugin を追加します。 prettier/recommended

## を .eslintrc.js の拡張部分まで #

extends: ["eslint:recommended", "plugin:prettier/recommended"]

実際に次のことを実行します

その後、

を追加できます。ルート ディレクトリにある prettierrc.js ファイル、eslint に従います 内部のルールがプロンプトを表示し、保存するときに

module.exports = {
  semi: false,
  singleQuote: true,
  bracketSpacing: true,
}

3 内のルールに従ってフォーマットされます。vue プロジェクトで prettier ルールを使用します1) Prettier 設定を作成するときに最初に eslint を選択します

2) ルート ディレクトリに .prettierrc.js を作成しますルールを追加します

module.exports = {
  semi: false,
  singleQuote: true,
  bracketSpacing: true,
};

Default この場合、コード内の形式が正しくない場合、警告が発行されます

エラーになる場合は、次のコードを .eslintrc.js に追加する必要があります

rules: {
//…
  'prettier/prettier': 'error'
}

このときの効果は次のとおりです

注: 一部の構成を変更した後、vscode はすぐに有効にならない場合があります。プロジェクトを閉じて、再度開いて試してください。

VSCode の詳細については、vscode チュートリアル を参照してください。 ！

以上がvscode で eslint と pretty を使用する方法の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。