#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']
eslint.bootcss.com/docs/rules/ 対応する属性を見つけてクリックして入力し、オプションを見つけます
注: この時点で、プロジェクトはデフォルトの設定とルールのルールに従ってプロンプトが表示されます。また、保存時に 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 を選択します
module.exports = { semi: false, singleQuote: true, bracketSpacing: true, };Default この場合、コード内の形式が正しくない場合、警告が発行されます エラーになる場合は、次のコードを .eslintrc.js に追加する必要があります
rules: { //… 'prettier/prettier': 'error' }このときの効果は次のとおりです
注: 一部の構成を変更した後、vscode はすぐに有効にならない場合があります。プロジェクトを閉じて、再度開いて試してください。
VSCode の詳細については、vscode チュートリアル を参照してください。 !
以上がvscode で eslint と pretty を使用する方法の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。