ESLintとPrettierの使用

Prettierの設定方法
フォルダでコマンドラインに入力し、package.jsonファイルを作成します.

npm init -y

最初の依存項目をインストールします.

npm add --dev prettier
npm i -D eslint-plugin-prettier

Eslint-plugin-prettierプラグインはprettierを呼び出してコードスタイルをチェックします.その原理はprettierを使用してコードをフォーマットし、フォーマット前のコードと比較し、一致しない場合はprettierによってマークされます.
ルートフォルダにprettier.config.jsファイルを作成し、Prettierルールを追加します.

module.exports = {
  "printWidth": 100, //      ，         ，   80
  "singleQuote": true,
  "jsxBracketSameLine": false,
  "tabWidth": 2,  //  tab       
  "useTabs": false, //    tab    ，   false，         
  "singleQuote": false, //          ，   false，     
  "semi": true, //        ，   true
  "trailingComma": "none", //       ，      ""
  "bracketSpacing": true, //            ，   true，  ：{ foo: bar }
  "parser": "babylon" //       ，   babylon， babel  。
};

printWidthは、単行コードが100文字を超えないことを保証します.
singleQuoteは、すべての二重引用符を単一引用符に変換します.
trailingCommaは、最後のオブジェクトプロパティの最後にカンマがあることを確認します.
bracketSpacingオブジェクトの文字数の間にスペースを印刷します.

If bracketSpacing is true - Example: { foo: bar }
If bracketSpacing is false - Example: {foo: bar}

jsxBracketSameLineは、複数行のJSX要素の最後の行に配置されます>:

// true example

  Click Here


// false example

  Click Here

tabWidthは、単一のインデントのスペース数を指定します.
semiがtrueに設定されている場合は、文の末尾に   ;   .
次に、このスクリプトの役割について説明します.

“prettier”: “prettier  — write src/**/*.js”

prettierを実行し、src/フォルダ内のすべての.jsファイルを検索することを意味します.--writeフラグはprettierにフォーマットされた内容をファイルに保存し、フォーマット中に発見された異常を特定するように伝えます.
このスクリプトをターミナルで実行します.

npm prettier

ESLintの設定方法
関連項目をいくつか紹介します.
Eslint-config-airbnb:このパッケージはすべてのAirbnbのESLint構成を提供しており、それらを変更することができます.
eslint-plugin-babel:babel-eslintのプラグインパートナー.
Eslint-plugin-import:このプラグインは、ES 2015+(ES 6+)のインポート/エクスポート構文をサポートし、スペルミスのファイルパスとインポート名を防止することを目的としています.
Eslint-plugin-jsx-a 11 y:JSX要素のアクセス性ルールに適用されるlintingルール.
Eslint-plugin-prettier:ESLintとPrettierの使用をよりスムーズにします.
Eslint-plugin-react:React固有のlintingルール.
Eslint-config-jest-enzyme:ReactおよびEnzyme固有のグローバル変数です.このlint構成は、ESLintにどのグローバル変数があるかを知らせ、itとdescribeを断言するような警告を出さないようにします.
Eslint-plugin-jest:JestのESLintプラグイン.
同様にeslintをインストールします.
ルートディレクトリに.eslintrc.jsファイルを作成するには:

module.exports = {
    env: {
        es6: true,
        browser: true,
        node: true,
    },
    extends: ['airbnb', 'plugin:jest/recommended', 'jest-enzyme'],
    plugins: [
        'babel',
        'import',
        'jsx-a11y',
        'react',
        'prettier',
    ],
    parser: 'babel-eslint',
    parserOptions: {
        ecmaVersion: 6,
        sourceType: 'module',
        ecmaFeatures: {
            jsx: true
        }
    },
    rules: {
        'linebreak-style': 'off', // Don't play nicely with Windows.
        'arrow-parens': 'off', // Incompatible with prettier
        'object-curly-newline': 'off', // Incompatible with prettier
        'no-mixed-operators': 'off', // Incompatible with prettier
        'arrow-body-style': 'off', // Not our taste?
        'function-paren-newline': 'off', // Incompatible with prettier
        'no-plusplus': 'off',
        'space-before-function-paren': 0, // Incompatible with prettier
        'max-len': ['error', 100, 2, { ignoreUrls: true, }], // airbnb is allowing some edge cases
        'no-console': 'error', // airbnb is using warn
        'no-alert': 'error', // airbnb is using warn
        'no-param-reassign': 'off', // Not our taste?
        "radix": "off", // parseInt, parseFloat radix turned off. Not my taste.
        'react/require-default-props': 'off', // airbnb use error
        'react/forbid-prop-types': 'off', // airbnb use error
        'react/jsx-filename-extension': ['error', { extensions: ['.js'] }], // airbnb is using .jsx
        'prefer-destructuring': 'off',
        'react/no-find-dom-node': 'off', // I don't know
        'react/no-did-mount-set-state': 'off',
        'react/no-unused-prop-types': 'off', // Is still buggy
        'react/jsx-one-expression-per-line': 'off',

        "jsx-a11y/anchor-is-valid": ["error", { "components": ["Link"], "specialLink": ["to"] }],
        "jsx-a11y/label-has-for": [2, {
            "required": {
                "every": ["id"]
            }
        }], // for nested label htmlFor error

        'prettier/prettier': ['error'],
    },
};

'prettier/prettier': ['error'] prettierでマークされた場所からエラーメッセージが投げ出されることを示します.
ルートディレクトリに.eslintignoreファイルを追加するには、次の手順に従います.

/.git
/.vscode
node_modules

まず.eslintrc.jsファイルの役割を紹介します.
まず分割します.

module.exports = { 
   env:{}, 
   extends: {}, 
   plugin: {}, 
   parser: {}, 
   parserOptions: {}, 
   rules: {},
};

1.env:グローバル変数の事前定義に使用します.我々の例では、利用可能な環境にはes 6、browser、およびes 6が含まれる.Es 6は、モジュール以外のすべてのECMAScript 6機能を有効にします.browserは、Windowsなどのすべてのブラウザのグローバル変数を追加します.Nodeは、globalなどのNodeグローバル変数とNode役割ドメインを追加します.
2.extends:文字列配列--拡張された面構成の追加構成オプション.今、airbnbのlintingルールを使用しています.これらのルールはjestに拡張され、jest-enzymeに拡張されています.
3.plugins:プラグインは基本的に私たちが使用したいlintingルールです.babel、import、jsx-a 11 y、react、prettierを使用しています.
4.parser:デフォルトではESLintはEspreeを使用しますが、babelを使用しているため、Babel-ESLintを使用する必要があります.
5.parserOptions:Espreeのデフォルト解析器をbabel-eslintに変更する場合は、parserOptionsを指定する必要があります.必要です.オプションでESLintに、ecmaVersionは6だと伝えました.scriptではなくEcmaScriptモジュールでコードを記述するので、sourceTypeをmoduleとして指定します.Reactを使用してJSXを導入したので、ecmaFeaturesにjsxオプションを追加し、trueに設定しました.
6.rules:プラグインで追加したすべてのルールを拡張し、変更または上書きできます.
紹介します.eslintignore
.eslintignoreには、ESLintがlintしたくないパスのリストが含まれています.ここでは3つしか指定していません.
1.//git——Git関連ファイルがlintされることを望んでいません.
2.//vscode--私はVS Codeを使用しているので、このエディタは自分のプロファイルを提供しています.プロファイルがlintされることを望んでいません.
3. node_modules--依存項目がlintされることを望んでいないので、このディレクトリもリストに追加します.
vueでの使用
ESLintのautofix機能により、コードを保存する際にerrorを投げ出す場所を自動的にfixします.私たちのプロジェクトはwebpackにeslint-loaderを導入してeslintを起動するので、webpackの構成を少し修正すれば、webpack-dev-serverを起動するたびに、コードを保存するたびに自動的にコードをフォーマットすることができます.

const path = require('path')
module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|vue)$/,
    	loader: 'eslint-loader',
    	enforce: 'pre',
    	include: [path.join(__dirname, 'src')],
    	options: {
          fix: true
    	}
      }
    ]
}

eslintがcli方式で直接起動されている場合は、eslint --fixのようなfixを追加するだけです.
既存のプラグインと競合している場合はどうしますか?

npm i -D eslint-config-prettier

eslint-config-prettier構成を使用すると、不要なlintオプションやprettierと競合するlintオプションを閉じることができます.これにより、errorが2回同時に現れることはありません.使用するときは、この構成がextendsの最後の項目にあることを確認する必要があります.

//.eslintrc.js
{
  extends: [
    'standard', //  standard     
    "prettier",
  ],
}

prettierと競合する構成項目を示すドキュメントがあります.
上記の2つの構成を同時に使用
上記の2つの構成を同時に使用すると、次のように構成を簡素化できます.

//.eslintrc.js
{
  "extends": ["plugin:prettier/recommended"]
}

 
これはvue-cliで生成されたコードに基づいて修正され、standardを使用してコード仕様を作成します.

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint'
  },
  env: {
    browser: true,
    es6: true
  },
  extends: [
    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
    'standard',
    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
    'plugin:vue/essential',
    "plugin:prettier/recommended",
  ],
  // required to lint *.vue files
  plugins: [
    'vue'
  ],
  // add your custom rules here
  rules: {
    "prettier/prettier": "error",
    // allow async-await
    'generator-star-spacing': 'off',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }
}

Vscodeでの使用
prettierとeslintを設定しましたが、毎回スクリプトを実行します.次に、より自動化します.
1.エディタでctrl+sを押すとフォーマットとlintコードが表示されます.
2.コードをコミットするたびに、コードを自動的にlintおよびフォーマットします.
3.コードの保存時にフォーマットとlintを行うには、VSコードのようなエディタを使用する必要があります.
ESLint拡張プラグインをインストールします.ここで(https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)プラグインをダウンロードするか、VSコードエディタでctrl+shift+xを押して拡張モジュールを開き、eslintを検索すると、一連のプラグインが表示されます.Dirk Baeumerが開発したものをインストールします.インストールが完了したら、reloadボタンをクリックしてエディタを再起動します.
このプラグインをインストールしたら、app/ルートフォルダに.vscode/というフォルダを作成します.そのポイント番号を忘れないでください.これは非常に重要です.
フォルダにsettings.jsonファイルを作成します.以下に示します.

{
  "editor.formatOnSave": false,
  "eslint.autoFixOnSave": true,
}

 

editor.formatOnSave-ここでfalseに設定します.ファイルフォーマットのデフォルトエディタ構成がESLintとPrettierと衝突したくないからです.

eslint.autoFixOnSave--ファイルを保存するたびにインストールされるプラグインが正常に動作することを望んでいるので、ここでtrueに設定します.ESLintの構成はPrettierの構成に関連付けられているため、保存をクリックするたびにコードがフォーマットされ、lintされます.

英語の原文