インスタンス詳細Vueプロジェクトeslint+prettier仕様コードスタイルの使用

6748 ワード
vue
チームが開発したプロジェクトは、コードスタイルに要求がなければ、どのくらいのチームメンバーがいるか、もちろんいくつかの異なるコードスタイルが現れます.そのため、チームのコードスタイルを統一できるツールが必要です.強制的な規範として、プロジェクト全体のコードスタイルを統一する必要があります.
幸いなことに、eslintとprettierがあります.
eslint VS prettier
ほとんどのプロジェクトはeslintを採用してコードの品質検査を行うべきで、一部はある程度の統一スタイルを採用する可能性があります.なぜprettierが必要なのでしょうか?私たちはまずそれらを簡単に理解します.
各種linters
全体的にlintersには2つの能力があります.
  • は、定義されているが使用されていない変数があるかどうか、または関数式でプログラミングされた関数が副作用を生じているかどうかなど、コード品質を検査する.
  • コードスタイルをチェックします.たとえば、各行の最大長さ、または末尾カンマを使用するかどうかなどです.

    • ここで、eslintドキュメントでは、スパナアイコン付きのルールがeslintが自動的に修復できるルールです.このアイコンを持たないルールでは、eslintはエラーや警告しか与えられず、開発者が手動で修復します.
    prettier
    pretterはコードの品質を検査する能力がなく、コードスタイルを指定された規範に従って統一するだけで、1つのプロジェクトに複数の異なるコードスタイルが現れることを避ける.
    プロジェクト構成
    ここではvueプロジェクトを例として使用します
    一、まずeslintを構成する
    皆さんのプロジェクトがvue cliで生成され、eslintを使用することを選択すると、デフォルトではプロジェクトルートディレクトリの下で生成されます.eslintrc.js.ない場合は、プロジェクトのルートディレクトリの下にファイルを作成することもできます.Eslintignoreファイル
    ここではeslint-plugin-vueを使用し、vue/strongly-recommendedルールを選択します.
    npm install --save-dev eslint eslint-plugin-vue@next
 
// .eslintrc.js
 
extends: {
  'plugin:vue/strongly-recommended'
}//        ：866109386
 //  1-3     ，    ，  
// .eslintignore
 
/build/
/config/
/dist/
/*.js
/test/unit/coverage/

    再コンパイル時にeslintがコードを自動的に修復する場合は、webpack構成にeslintを追加し、fix:trueを設定しdevserverでeslintをオンにする必要があります.
    // config/index.js
 
module.exports = {
 dev: {
  useEslint: true, 
 }//         ：866109386
}//  1-3     
 //        ，      
// 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.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）
};

    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 hooksを使用するのに役立つサードパーティのライブラリで、packageに基づいて使用できます.jsonファイルで定義されたフックとフック実行のコマンドは、実行する操作を対応するフックスクリプトに書きます.
    lint-stagedは、gitにコミットされたコードに対してlinterを使用できるサードパーティ製ライブラリであり、huskyがgit hooksを使用することに依存していることを公式に説明しています.ここでは、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 commitのたびに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プロファイルを検索してコードチェックを行うので便利です.
    ローカルオフラインプレビューReact/Vueなどのオープンソースツール公式ドキュメントサイト
    vue historyモードURLの#番号を削除する方法