標準化学習ノート

文章内容出力源:勾引教育大先端高給訓練キャンプ

正規化基準

なぜ規範化基準があるのか

ソフトウェア開発には複数の人が協力する必要がある

異なる開発者は異なる符号化習慣と好みを持っている

異なる好みでプロジェクトのメンテナンスコストを増加

各プロジェクトまたはチームは、明確に統一された基準

を必要とする.
どこが規範化の標準を必要とします

コード、ドキュメント、さらにはコミットログ

開発過程における人為的作成の成果図

コード標準化仕様が最も重要

規範化の実施方法

符号化前人為の標準約束

ツールによるLint

の実装
一般的な規範化の実現方式

ESLintツール

を使用

カスタムESLintチェックルール

ESLint TypeScriptのサポート

ESLint自動化ツールまたはWebpack

ESLintベースの派生ツール

StyleLintツールの使用

一、ESLint

1.ESLintの紹介

最も主流のJavaScript Lintツール、JSコード品質

を検出

ESLintは開発者のコードスタイルを統一しやすい

ESLintは開発者の符号化能力の向上を助けることができる

2.ESLIntインストール

初期化項目:yarn init -y

ESLintモジュールを開発依存としてインストール:yarn add eslint --dev

CLIコマンドによるインストール結果の検証:yarn eslint -v

3.ESLint検査手順

「問題」コード

を記述する

eslintを使用して検出を実行する:yarn eslint 01-prepare.jsを実行し、自動修復yarn eslint 01-prepare.js --fix

を実行する.

eslint使用構成の完了:yarn eslint --init

4.ESLintプロファイル解析

module.exports = {
  env: {
    //  ， 
    browser: true,
    es2020: true
  },
  // eslint  
  extends: [
    'standard'
  ],
  //  ， 
  parserOptions: {
    ecmaVersion: 11
  },
  //  
  rules: {
    'no-alert': 'error'
  },
  //  
  globals: {
    "$": 'readonly', 
  }
}

5.ESLint構成コメント

コードのコメントに構成を書き込み、コードを検証します.

const str1 = "${name} is coder" // eslint-disable-line no-template-curly-in-string

console.log(str1)

6.ESLint結合自動化ツール

統合後、ESLintは必ず

で動作します.

はプロジェクトと統一されており、管理がより便利である

7.ESLint結合Webpack

Eslint loader形式でJavaScriptコードを検証
先行作業:

git clone倉庫

対応モジュール

を取り付ける.

eslintモジュール

をインストール

eslint-loaderモジュール

をインストール

初期化.eslintrc.jsプロファイル

次の構成:

reles: {
  'react/jsx-uses-react': 2
},
  plugins: [
    'react'
  ]

8近代化プロジェクト集積ESLint

9 ESLint検査Type Script

二、StyleLint

1.StyleLint使用説明

は、デフォルトのコードチェックルール

を提供する.

CLIツールを提供し、

を迅速に呼び出す.

はプラグインによってSass、Less、PostCSS

をサポートする.

はGulpまたはWebpack統合

をサポートするnpm install stylelint --dev npx stylelint ./index.css npm install stylelint-config-sass-guidelines
.stylelintrc.js

module.exports = {
  extends: [
    "stylelint-config-standard",
    "stylelint-config-sass-guidelines"
  ]
}

運転:npx stylelint ./index.css

三、Prettierの使用

ここ2年で流行しているフロントエンドコード汎用フォーマットツールは、ほとんど様々なコードのフォーマットを完了することができます.yarn add prettier --dev prettierを現在のプロジェクトにインストールyarn prettier style.cssフォーマットされた結果をコマンドラインに出力yarn prettier style.css --writeフォーマットされた結果を元のファイルに上書きyarn prettier . --write現在のプロジェクト全体をフォーマット

四、Git Hooks紹介

コードを倉庫にコミットする前にlint作業を実行する

Git HookはGitフックとも呼ばれ、各フックは1つのタスク

に対応する.

shellスクリプトによりフックタスクの出発時に具体的に実行する操作

を記述することができる.
1つのGit倉庫で、.git/hooksディレクトリに入って、それから多くのsampleファイルを見て、cp pre-commit.sample pre-commitを実行して、pre-commitファイルをコピーして、中の内容を先に取り除いて、簡単なechoを書いてGitフックの効果を見ます(第1行は実行可能なファイルに必要な固定文法で、削除できません)

#!/bin/sh
echo "git hooks"

その後、倉庫ルートディレクトリに戻り、git add .、git commit -m"xx"を実行します.
git hooksが出力されていることがわかります.pre-commitというフックが有効になっていることを示しています.

五、ESLint結合Git Hooks

多くのフロントエンド開発者はshellが苦手で、HuskyはGit Hooksの使用ニーズを実現することができます.
既存のeslintのGitプロジェクトではhuskyをインストールし、Git commitの際にlintを行うyarn add husky --dev
package.json

{
  "name": "GitHooks",
  "version": "1.0.0",
  "main": "index.js",
  "author": "jiailing <[email protected]>",
  "license": "MIT",
  "scripts": {
    "test": "eslint ./index.js"
  },
  "devDependencies": {
    "eslint": "^7.3.1",
    "eslint-config-standard": "^14.1.1",
    "eslint-plugin-import": "^2.21.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.1",
    "husky": "^4.2.5"
  },
  "husky": {
    "hooks": {
      "pre-commit": "yarn test"
    }
  }
}

そして実行echo node_modules > .gitignore git add . git commit -m "husky"
私たちのindexが見えます.jsのコードエラーはコンソールに出力され、Git commitは失敗しました.
説明huskyはコードコミット前のlint作業を完了しました.ただしhuskyはコードをフォーマットすることはできません.lint-stageを使用できます.yarn add lint-staged --dev
package.json

{
  "name": "GitHooks",
  "version": "1.0.0",
  "main": "index.js",
  "author": "jiailing <[email protected]>",
  "license": "MIT",
  "scripts": {
    "test": "eslint ./index.js",
    "precommit": "lint-staged"
  },
  "devDependencies": {
    "eslint": "^7.3.1",
    "eslint-config-standard": "^14.1.1",
    "eslint-plugin-import": "^2.21.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.1",
    "husky": "^4.2.5",
    "lint-staged": "^10.2.11"
  },
  "husky": {
    "hooks": {
      "pre-commit": "yarn precommit"
    }
  },
  "lint-staged": {
    "*.js": [
      "eslint",
      "git add"
    ]
  }
}