実例Vueプロジェクトはeslint＋prettier仕様コードスタイルを使用しています。

チームが開発したプロジェクトはコードスタイルに対して要求がなければ、チームメンバーがどれぐらいいますか？したがって、チームコードのスタイルを統一できるツールが必要です。強制的な仕様として、プロジェクト全体のコードスタイルを統一します。
幸い、私たちはeslintとprettierがあります。
eslint VS prettier
ほとんどの項目はすでにeslintを採用してコードの品質検査を行います。少ない部分はある程度統一されたスタイルを採用するかもしれません。なぜprettierが必要ですか？私たちはまず彼らに対して簡単な理解をします。
各種linters
全体として、lintersは2つの能力があります。

は、定義されているが使用されていない変数があるかどうか、または関数式プログラミングの関数を使用して副作用があるかどうかなどのコード品質をチェックする。

は、コードスタイルをチェックします。例えば、行ごとの最大長さや、ピリオドを使うかどうかなどです。

このうち、eslint文書でレンチのアイコンを持つルールは、eslintが自動的に修復できるルールです。このアイコンを持たないルールでは、eslintはエラーや警告しか与えられません。その後、開発者が人工的に修復します。
prettier
pretterはコードの品質を検査する能力がありません。コードスタイルは指定された仕様によって統一されます。一つのプロジェクトには多くのコードスタイルが現れないようにします。
プロジェクトの設定
ここではvueプロジェクトを例に使っています。
一、まずeslintを配置する
もしみんなのプロジェクトがvue cliを使って生成され、eslintを使用することを選択すれば、デフォルトはプロジェクトのルートディレクトリの下で生成されます。eslintrc.js。もしないならば、プロジェクトのルートディレクトリの下でこのファイルと.eslintignoreファイルを作成することもできます。
ここで私はeslint-plugin-vueを使って、選択したのはvue/strongly-recommendの規則です。

npm install --save-dev eslint eslint-plugin-vue@next

// .eslintrc.js

extends: {
  'plugin:vue/strongly-recommended'
}

// .eslintignore

/build/
/config/
/dist/
/*.js
/test/unit/coverage/

再コンパイルを希望する場合は、自動的にコードを修復し、webpack構成にeslintを追加し、fix:trueを設定し、devserverでeslintを開く必要があります。

// config/index.js

module.exports = {
 dev: {
  useEslint: true, 
 }
}

// webpack.base.conf.js

const createLintingRule = () => ({
 test: /\.(js|vue)$/,
 loader: 'eslint-loader',
 enforce: 'pre',
 include: [resolve('src'), resolve('test')],
 options: {
  formatter: require('eslint-friendly-formatter'),
  emitWarning: !config.dev.showEslintErrorsInOverlay,
  fix: true,
 }
})

二、prettierの配置
eslintを使用するためには、コードスタイルを最大限に統一することはできませんので、prettierを導入する必要があります。npm install --save-dev prettier実際の必要に応じてprettierを配置する。
//prettier.co.nfig.js

module.exports = { 
 "printWidth": 80, //       （  80）
 "tabWidth": 2, //   tab        （  2）
 "useTabs": false, //     tab    （  false）
 "singleQuote": true, //      （  false）
 "semi": true, //         (  true)
 "trailingComma": "all", //         （  none）
 "bracketSpacing": true, //               （  true）
 "jsxBracketSameLine": false, //   JSX  >          ，       （  false）
 "arrowParens": "avoid" //                     （  avoid）
};

package.jsonにprettierを呼び出してフォーマットするコマンドを配置する必要があります。
//package.json

"scripts": {
 "format": "prettier --write \"src/**/*.js\" \"src/**/*.vue\"",
}

これで、コマンドラインにnpm run formatを入力してコードをフォーマットすることができます。
設定huskyとlint-staged
直接prettierを使用してコードフォーマットを行うので、いくつかの弊害が残っています。例えば、
すべてのファイルを一度にフォーマットします。プロジェクトが途中でprettierに加入すると、既に作成されているコードをフォーマットします。衝突や予期せぬ問題を引き起こし、プロジェクトの安定性を低下させます。
毎回npm run formatを入力してコードフォーマットを行います。余分な操作が多くて、開発体験がよくないです。
したがって、コードフォーマットのタイミングを変更して、今回提出したコードだけをフォーマットして、コード提出前にフォーマットして、倉庫に預け入れられたコードは全部フォーマットされた後の良いコードであることを確認します。
huskyは、git hoksを使用する第三者ライブラリであり、package.jsonファイルで定義されているフックとフックによって実行されるコマンドに対応するフックスクリプトに、操作を書き込みます。
lint-stagedは、gitに提出できるコードに対して、linterのサードパーティライブラリを使用しており、huskyに依存して、git honksを使用する。ここではlintersを呼び出すだけでなく、prettierを呼び出してコードをフォーマットすることもできます。npm install --save-dev lint-staged husky//package.json

"scripts": {
  "precommit": "lint-staged" // precommit    lint-staged
},
"lint-staged": {
  "src/**/*.{js,json,css,vue}": [
   "prettier --write", //    prettier，   eslint，      
   "eslint --fix",
   "git add"
  ]
},

eslintとprettierの構成を同時に使う
prettierとeslintを同時に使用する必要があるので、prettierのいくつかの規則とeslintのいくつかの規則は衝突する可能性があります。だから、eslintのいくつかはprettierと衝突するかもしれないコードフォーマット規則をクローズする必要があります。ここではeslint-plugin-prettierとeslint-config-prettierを使用します。
eslint-plugin-prettierは、prettierのルールをeslintのルールに設定して、ルールに合わないものを提示しても良いです。eslint-plugin-vueと同じ）
eslint-config-prettierは、eslintがprettierと衝突する可能性のあるコードフォーマット規則をクローズすることができます。公式にはeslint-plugin-prettierがeslint-config-prettierと食べ合わせてこそ最高の効果が得られると言われています。

npm install --save-dev eslint-plugin-prettier eslint-config-prettier

// .eslintrc.js
module.exports = {
  extends: [
    'plugin:vue/strongly-recommended',
    'plugin:prettier/recommended'
  ]
  rules: {
    "prettier/prettier": "error"
  }
}

上記の構成を経て、git comitのたびに、prettierとeslintでコードのフォーマットと品質検査を行います。コードに問題がないことを確認してから提出します。
全体設定ファイル

npm install -D prettier husky lint-staged eslint-config-prettier eslint-plugin-prettier

// package.json
{
 "scripts": {
  "format": "prettier --write \"src/**/*.js\" \"src/**/*.vue\"",
  "precommit": "lint-staged"
 },
 "lint-staged": {
  "src/**/*.{js,json,css,vue}": [
   "prettier --write",
   "eslint --fix",
   "git add"
  ]
 },
 "devDependencies": {
  "eslint": "^4.15.0",
  "eslint-config-prettier": "^2.9.0",
  "eslint-plugin-prettier": "^2.6.2",
  "eslint-plugin-vue": "^4.0.0",
  "husky": "^0.14.3",
  "lint-staged": "^7.2.0",
  "prettier": "^1.14.2",
 },
}

// eslintrc.js
// https://eslint.org/docs/user-guide/configuring
module.exports = {
 extends: [
  'plugin:vue/strongly-recommended',
  'plugin:prettier/recommended'
 ],
 // add your custom rules here
 rules: {
  // ...other codes
  "prettier/prettier": "error"
 }
}

//prettier.config.js
module.exports = { 
 "printWidth": 80, //       （  80）
 "tabWidth": 2, //   tab        （  2）
 "useTabs": false, //     tab    （  false）
 "singleQuote": true, //      （  false）
 "semi": true, //         (  true)
 "trailingComma": "all", //         （  none）
 "bracketSpacing": true, //               （  true）
 "jsxBracketSameLine": false, //   JSX  >          ，       （  false）
 "arrowParens": "avoid" //                     （  avoid）
};

最後に書く
一般的なIDEは、eslintまたはprettierツールを統合すると、デフォルトでプロジェクトのルートディレクトリの下にある関連配置ファイルに従ってコードチェックを行います。
vscodeを使うと、veturのデフォルトコードがスタイル化されて使うのがprettierです。プロジェクトのルートディレクトリのprettierプロファイルを自動的に検索してフォーマットします。eslint検索ツールは、eslintプラグインを使用することを推奨します。インストール後も自動的にeslintプロファイルを検索してコードチェックを行います。とても便利です。
締め括りをつける
以上述べたのは小编でご绍介したVueプロジェクトはeslint+prettierコード风格を使っています。皆さんに助けてほしいです。ここでも私たちのサイトを応援してくれてありがとうございます。