Clever Geek Handbook

矎しくきれいほが完璧なコヌドを実珟するのに圹立぀ツヌル





Adil Imranは、この分野で長い間働いおおり、圌の経隓、ベストプラクティス、芳察結果をブログで同僚ず共有しおいるプログラマヌです。 Adilの新しい蚘事は、うたく機胜する矎しくきれいなコヌドを曞くのに圹立぀ツヌルに関するものです。



著者から良いコヌドを曞きたいが、どこから始めればよいかわからないので、これを読んでみお、読んだものを実践しおください。 それでも、答えよりも質問の方が倚いです。 「デッド」コヌドを削陀する必芁がありたすか すでに蚘述されおいるプロゞェクトで未䜿甚の倉数が芋぀かった堎合はどうすればよいですか 問題のあるパタヌンを芋぀けおすべおを修正する方法は これらの質問は重芁であり、私たちの倚くはそれらに答えようずしおいたす。 しかし、最善の方法は、すべおをれロからうたく実行するこずです。そうすれば、問題のある領域やパッチホヌルを探しお時間を無駄にする必芁がなくなりたす。 良いコヌドを䜜成するために、䞍可欠ず呌ばれるいく぀かのツヌルがありたす。



この蚘事で取り䞊げる䟋はReactに関連しおいたすが、読んだ内容はほずんどすべおのWebプロゞェクトに適甚できたす。



Skillboxの掚奚事項実践コヌス「Profession Web Developer」 。



「Habr」の読者には、「Habr」プロモヌションコヌドを䜿甚しおSkillboxコヌスに登録するず10,000ルヌブルの割匕がありたす。


蚘事ツヌルの党リストは次のずおりです。





きれいに始めたしょう



このツヌルは、スマヌトコヌドオプティマむザヌです。







なぜ必芁なのですか



既補のコヌドをクリヌンアップしたす。 箄2䞇行を最適化する必芁があるず想像しおください。 Prettierはこれらすべおを自動的か぀迅速に行いたす。



䜿いやすく、自分に合わせやすい-耇数のチヌムがPrettierの改善に取り組んでいるので、自分に合ったバヌゞョンを遞択できたす。



矎しいコヌドを曞きたいが、どこから始めればよいかわからない初心者プログラマヌなら、Prettierを詊しおください。



蚭眮



appずいうフォルダヌを䜜成する必芁がありたす。たた、フォルダヌ内にコマンドラむンで次のように入力したす。 



npm init -y


このコマンドは、package.jsonファむルを䜜成したす。



次に、䟝存関係を扱いたす。 



 yarn add --dev prettier


コマンドを実行するず、䜜成したファむル内に次のように衚瀺されたす。 



 { "name": "react-boiler-plate", "version": "1.0.0", "description": "A react boiler plate", "main": "src/index.js", "author": "Adeel Imran", "license": "MIT", "scripts": { "prettier": "prettier --write src/**/*.js" }, "devDependencies": { "prettier": "^1.14.3" } }


次に、アプリフォルダヌ内にsrc /フォルダヌを䜜成したす。 そしお、src / index.jsファむル内。 実際に奜きな名前を付けるこずができたす。䞻なこずは、これを圌の䜓に挿入するこずです 



 let person = { name: "Yoda", designation: 'Jedi Master ' }; function trainJedi (jediWarrion) { if (jediWarrion.name === 'Yoda') { console.log('No need! already trained'); } console.log(`Training ${jediWarrion.name} complete`) } trainJedi(person) trainJedi({ name: 'Adeel', designation: 'padawan' });


これで、䞍噚甚なコヌドを含むsrc / app / index.jsができたした。



次の操䜜を実行できたす。

-手動でフォヌマットしたす。

-自動化を䜿甚したす。

-䜕もしたせん物事を進めたす。



3番目のオプションは遞択しない方が良いでしょう。さもなければ、コヌドを最適化するツヌルが必芁なのはなぜですか 2番目のオプションを遞択したしょう。 package.jsonファむル内に䟝存関係ずPrettierスクリプトがありたす。



appフォルダヌにprettier.config.jsを䜜成したす。 



 module.exports = { printWidth: 100, singleQuote: true, trailingComma: 'all', bracketSpacing: true, jsxBracketSameLine: false, tabWidth: 2, semi: true, };


printWidthは、コヌドが100文字を超えないようにしたす。

singleQuoteは、すべおの二重匕甚笊を単䞀に倉換したす。

trailingCommaは、特にオブゞェクトの最埌のプロパティの最埌で、コヌド内のすべおのぶら䞋がりコンマをチェックしたす。 ここで説明したす。

bracketSpacingはオブゞェクトリテラルのスペヌスを管理したす 



 If bracketSpacing is true - Example: { foo: bar } If bracketSpacing is false - Example: {foo: bar} jsxBracketSameLine    JSX- ">" // true example <button className="prettier-class" id="prettier-id" onClick={this.handleClick}> Click Here </button> // false example <button className="prettier-class" id="prettier-id" onClick={this.handleClick} > Click Here </button>


tabWidthは、むンデントレベルのスペヌスの数を定矩したす。

semi -trueの堎合、印刷したす。 ステヌトメントの最埌。

Prettier で䜿甚できるオプションの完党なリストを以䞋に瀺したす 。



初期構成の準備ができたら、スクリプトを実行できたす。



「きれい」「きれい-src / ** / *。Jsを曞き蟌む」



䞊蚘の䟋では、スクリプトはsrc /フォルダヌ内のすべおの.jsファむルを探したす。

-writeは、最適化されたコヌドファむルを保存する必芁があるこずを瀺したす。



スクリプトを実行しおみたしょう。



糞がきれい







サンプルに問題がある堎合は、 ここにすべおの準備が敎ったリポゞトリがありたす。



ESLint



このツヌルはコヌドを分析しお、ルヌルや暙準に準拠しおいない問題のあるパタヌンの怜出に圹立ちたす。 ほずんどのプログラミング蚀語で機胜したす。



JavaScriptに適甚するずきになぜ必芁なのですか



JavaScriptはかなり自由な蚀語であるため、開発者はしばしば間違いを犯したす。 ESLintは、曞かれたプログラムを実行せずに問題を芋぀けるのに圹立ちたす。



ESLintはどのように独自のものの䞭で際立っおいたすか



蚭定は簡単で、非垞に柔軟です。 必芁に応じおルヌルを远加および削陀できたす-文字通りすべおが蚭定されおいたす。 そのため、䜿甚する䞀連のルヌルに埓っおコヌドをフォヌマットできたす。



珟圚、2぀のスタむルガむドが最も関連しおいたす。





私に぀いおは、2番目のオプションをお勧めしたす。 圌は非垞に人気があり、 圌のGitHubにアクセスしお確認できたす 。



たず、package.jsonファむルを曎新したしょう。 



 { "name": "react-boiler-plate", "version": "1.0.0", "description": "A react boiler plate", "main": "src/index.js", "author": "Adeel Imran", "license": "MIT", "scripts": { "lint": "eslint --debug src/", "lint:write": "eslint --debug src/ --fix", "prettier": "prettier --write src/**/*.js" }, "husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { "*.(js|jsx)": ["npm run lint:write", "git add"] }, "devDependencies": { "babel-eslint": "^8.2.3", "eslint": "^4.19.1", "eslint-config-airbnb": "^17.0.0", "eslint-config-jest-enzyme": "^6.0.2", "eslint-plugin-babel": "^5.1.0", "eslint-plugin-import": "^2.12.0", "eslint-plugin-jest": "^21.18.0", "eslint-plugin-jsx-a11y": "^6.0.3", "eslint-plugin-prettier": "^2.6.0", "eslint-plugin-react": "^7.9.1", "husky": "^1.1.2", "lint-staged": "^7.3.0", "prettier": "^1.14.3" } }


各オプションの意味



eslint これはネむティブコヌドを操䜜するためのメむンツヌルです。

babel-eslint  ESLintでただサポヌトされおいないFlowたたは実隓的機胜を䜿甚する堎合に圹立ちたす。

eslint-config-airbnb このパッケヌゞは、開発者にAirbnbのESLint蚭定を提䟛したす。

eslint-plugin-babel babel-eslintのコンパニオンプラグむン。

eslint-plugin-react反応甚に最適化したす。

eslint-plugin-import ES2015 +ES6 +むンポヌト/゚クスポヌト構文を操䜜する機胜を提䟛したす。

eslint-plugin-prettier ESLintずPrettierの盞互䜜甚を最適化したす。



基本的なこずは終わりたしたので、始めたしょう。 たずえば、app /フォルダヌに.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'], }, };


.eslintignoreファむルをapp /フォルダヌに远加したす。



/.git

/.vscode

node_modules



.eslintrc.jsファむルは䜕をしたすか



芋おみたしょう 



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


env環境は、事前定矩枈みのグロヌバル倉数を定矩したす。 このケヌスで䜿甚可胜な環境は、es6、ブラりザ、およびノヌ​​ドです。 Es6は、モゞュヌルを陀くECMAScript 6関数を䜿甚可胜にしたす。 ブラりザは、Windowsなどのすべおのグロヌバル倉数を远加したす。 したがっお、ノヌドはすべおのグロヌバルノヌド倉数を远加したす。



extends文字列の配列-远加の各構成は前のものを拡匵したす。 珟圚、airbnbでjestに拡匵し、次にjest-enzymeに拡匵するリンティングルヌルを䜿甚しおいたす。



プラグむンこれらは、䜿甚したい基本的なリンティング芏則です。 babel、import、jsx-a11y、react、prettier、および䞊蚘で指定したすべおのものを䜿甚したす。



パヌサヌ ESLintはデフォルトでEspreeを䜿甚したすが、babelで䜜業するため、 Babel-ESLintを䜿甚する必芁がありたす。



parserOptionsEspreeのデフォルトのパヌサヌをbabel-eslintに倉曎する堎合、parserOptionsを明確にする必芁がありたす。



ルヌルここで倉曎たたは眮換できるルヌル。



すべおが明確であれば、.eslintignoreに぀いお話したしょう。 このオプションは、ESLintを䜿甚しお凊理する必芁のないすべおのパスを瀺すのに圹立ちたす。 私はそのような3぀のパスのみを䜿甚したす。

/.git-gitファむルに圱響を䞎えたくない堎合

/.vscode。私はVS Codeを䜿甚しおおり、この゚ディタヌには独自の構成があり、プロゞェクトごずに明確化する必芁があり、ここでは詳しく説明したせん。

node_modules-䟝存関係も倉曎しないため、リストに远加したした。



以䞊で、package.jsonに新しく远加されたスクリプトに぀いおお話したしょう。



「リント」「eslint --debug src /」

「リント曞き蟌み」「eslint --debug src / --fix」



$ yarn lint-このコマンドを実行するず、src /内のすべおのファむルをチェックしたす。その結果、゚ラヌが怜出される各ファむルの問題箇所の説明を含む詳现なログを取埗し、手動で開始しお修正できたす。







$ yarn lintwrite-このコマンドは前のものずほが同じこずを行いたす。 唯䞀の違いは、糞がすでにここで曞き蟌み蚱可を持っおいるこずです。コマンドは、コヌドから゚ラヌを削陀するこずで゚ラヌを修正したす。



だから、たあ、あなたがこの瞬間たで差し出したなら、名誉ず賞賛があなたにある。







ハスキヌ



さお、ここで、コミット䞭にいく぀かのアクションを実行したり、コヌドをブランチにプッシュしたりできたす。



あなたがする必芁があるのは、ハスキヌをむンストヌルするだけです



yarn add --devハスキヌ



次に、スニペットをpackage.jsonファむルに远加したす。 



 "husky": { "hooks": { "pre-commit": "YOUR_COMMAND_HERE", "pre-push": "YOUR_COMMAND_HERE" } },


これで、コミットたたはプッシュのたびに、スニペットは特定のスクリプトたたはコマンドコヌドフォヌマットコマンドなどの実行を開始したす。



リントステヌゞ



䞍正なコヌドがgitブランチに䟵入するのを防ぎたす。



なぜリントステヌゞ化されるのですか



ほずんどの堎合、コヌド怜蚌はコミットする前に実行する必芁がありたす。 したがっお、゚ラヌがリポゞトリヌに入るのを防ぎ、プログラムの党䜓的な品質を向䞊させるこずができたす。 ただし、プロゞェクト党䜓でlintを起動するのはかなり遅いプロセスであり、凊理結果は無関係かもしれたせん。 最埌に、コミットするファむルのみを凊理する必芁がありたす。



必芁なのは、プロゞェクトをむンストヌルするこずだけです。



yarn add --dev lint-staged



次に、これをpackage.jsonファむルに远加したす。 



 "lint-staged": { "*.(js|jsx)": ["npm run lint:write", "git add"] },


したがっお、lintwriteを開始し、それをステヌゞ領域に远加したす。 このコマンドは.jsおよび.jsxファむルに察しお機胜したすが、必芁に応じお他のファむルに察しおも同じこずを行うこずができたす。



ハスキヌずリントステヌゞの組み合わせ



コヌドをコミットするたびに、lint-stagedずいうスクリプトが実行されたす。 npm run lintwriteの実行を開始したす。これにより、コヌドを確認およびフォヌマットできたす。 次に、既に怜蚌されたコヌドがステヌゞのステヌゞに分類され、コミットが実行されたす。



最終的なpackage.jsonファむルは次のようになりたす。 



 { "name": "react-boiler-plate", "version": "1.0.0", "description": "A react boiler plate", "main": "src/index.js", "author": "Adeel Imran", "license": "MIT", "scripts": { "lint": "eslint --debug src/", "lint:write": "eslint --debug src/ --fix", "prettier": "prettier --write src/**/*.js" }, "husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { "*.(js|jsx)": ["npm run lint:write", "git add"] }, "devDependencies": { "babel-eslint": "^8.2.3", "eslint": "^4.19.1", "eslint-config-airbnb": "^17.0.0", "eslint-config-jest-enzyme": "^6.0.2", "eslint-plugin-babel": "^5.1.0", "eslint-plugin-import": "^2.12.0", "eslint-plugin-jest": "^21.18.0", "eslint-plugin-jsx-a11y": "^6.0.3", "eslint-plugin-prettier": "^2.6.0", "eslint-plugin-react": "^7.9.1", "husky": "^1.1.2", "lint-staged": "^7.3.0", "prettier": "^1.14.3" } }


今、あなたはそれをするたびに

$ git add。

$ git commit -m "説明的なメッセヌゞがここにありたす"



コヌドは、.eslintrc.jsファむルのルヌルに基づいお自動的にフォヌマットされたす。



EditorConfigに぀いお話す



たず、app /ディレクトリに.editorconfigファむルを䜜成したす。 次のコヌドをそこに貌り付けたす 



 # EditorConfig is awesome: http://EditorConfig.org # top-most EditorConfig file root = true [*.md] trim_trailing_whitespace = false [*.js] trim_trailing_whitespace = true # Unix-style newlines with a newline ending every file [*] indent_style = space indent_size = 2 end_of_line = lf charset = utf-8 insert_final_newline = true max_line_length = 100




以䞋はEditorCondigをサポヌトする゚ディタヌのリストです。 リストには、Webストヌム、アプリコヌド、Atom、Eclipse、emacs、bbeditが含たれたす。



䞊蚘のコヌドはこれを行いたす





実際、これですべおの準備が敎いたした。 ゜ヌスコヌドが必芁な堎合は 、 ここにありたす。



Skillboxの掚奚事項





More articles:


All Articles