{"id":1615,"date":"2019-11-24T16:58:10","date_gmt":"2019-11-24T08:58:10","guid":{"rendered":"http:\/\/ykyi.net\/?p=1615"},"modified":"2019-11-24T16:58:10","modified_gmt":"2019-11-24T08:58:10","slug":"%e4%bd%bf%e7%94%a8prettierhusky%e5%92%8clint-staged%ef%bc%8c%e5%9c%a8%e6%8f%90%e4%ba%a4javascript%e4%bb%a3%e7%a0%81%e5%89%8d%e8%87%aa%e5%8a%a8%e6%a0%bc%e5%bc%8f%e5%8c%96%e4%bb%a3%e7%a0%81","status":"publish","type":"post","link":"https:\/\/ykyi.net\/?p=1615","title":{"rendered":"\u4f7f\u7528Prettier,Husky\u548clint-staged\uff0c\u5728\u63d0\u4ea4javascript\u4ee3\u7801\u524d\u81ea\u52a8\u683c\u5f0f\u5316\u4ee3\u7801"},"content":{"rendered":"<h3>\u76ee\u6807<\/h3>\n<p>\u4e3a\u9632\u6b62\u63d0\u4ea4\u4e0d\u5408\u683c\u7684\u4ee3\u7801\u6392\u7248\u5230\u4ed3\u5e93\u4e2d\uff0c\u6211\u4eec\u5e0c\u671b\u5728\u63d0\u4ea4\u524d\u683c\u5f0f\u5316\u4ee3\u7801\uff0c\u4f7f\u4e4b\u7b26\u5408\u9879\u76ee\u7684\u4ee3\u7801\u683c\u5f0f\u89c4\u8303\uff0c\u800c\u4e14\u5c3d\u53ef\u80fd\u4fdd\u8bc1\u903b\u8f91\u6b63\u786e\u3002\u5373\u76ee\u6807\u6709\u4e24\u70b9\uff1a<br \/>\n1. \u5bf9git staged\u7684\u4ee3\u7801\u5f3a\u884c\u683c\u5f0f\u5316\uff0c\u4f7f\u7b26\u5408\u89c4\u8303\u3002\u5bf9\u4e8e\u6ca1\u6709\u88abstaged\u7684\u4ee3\u7801\u6216\u6587\u4ef6\uff0c\u5c06\u5b8c\u5168\u5ffd\u7565\u3002<br \/>\n2. \u8dd1\u5355\u5143\u6d4b\u8bd5\u3002\u53ea\u6709\u901a\u8fc7\u4e86\u5355\u5143\u6d4b\u8bd5\u624d\u80fd\u63d0\u4ea4\u4ee3\u7801\u3002<\/p>\n<h3>\u5b89\u88c5\u4f9d\u8d56<\/h3>\n<pre><code class=\"\">$ npm install --save-dev husky lint-staged\n<\/code><\/pre>\n<p>\u5148\u5b89\u88c5husky\u548clint-staged\u3002\u6ce8\u95f4\u5728\u5b89\u88c5husky\u4e4b\u524d\u9700\u8981\u786e\u4fdd\u5de5\u7a0b\u76ee\u5f55\u5df2\u7ecf\u662f\u4e00\u4e2a\u5408\u6cd5\u7684git\u4ed3\u5e93\u3002\u56e0\u4e3a\uff0c\u5b89\u88c5husky\u65f6\u9700\u8981\u7ed9git\u4ed3\u5e93\u5b89\u88c5\u9884\u63d0\u4ea4\u94a9\u5b50(precommit hook)\u3002<br \/>\nLint-staged\u63d0\u4f9b\u4e86\u4e00\u4e2a\u5173\u952e\u7684\u529f\u80fd\uff0c\u5b83\u80fd\u627e\u5230\u6240\u6709\u88abgit staged\u7684\u6587\u4ef6\uff0c\u800c\u4e0d\u662f\u5de5\u7a0b\u4e0b\u9762\u6240\u6709\u7684\u6587\u4ef6\uff0c\u7136\u540e\u901a\u8fc7\u7ba1\u9053\u4ea4\u7ed9Prettier\u505a\u683c\u5f0f\u5316\u3002<\/p>\n<h3>\u4fee\u6539npm\u811a\u672c<\/h3>\n<p>\u5bf9npm script\u505a\u5982\u4e0b\u6539\u52a8\uff1a<\/p>\n<pre><code class=\"language-json \">  \"scripts\": {\n    \"precommit\": \"lint-staged\"\n  },\n  \"lint-staged\": {\n    \"*.{js,jsx,json}\": [\"prettier --write\", \"git add\"]\n  }\n<\/code><\/pre>\n<p>scripts.precommit\u7531Husky\u5904\u7406\uff0c\u5b83\u4f1a\u4f9d\u7167\u914d\u7f6e\u5728\u628a\u4ee3\u7801\u6b63\u5f0f\u63d0\u4ea4\u5230\u4ed3\u5e93\u524d\u8fd0\u884clint-staged(\u5f53\u7136\u6211\u4eec\u4e5f\u53ef\u4ee5\u914d\u7f6e\u5176\u4ed6\u547d\u4ee4\uff09\u3002<br \/>\nLint-staged\u518d\u627e\u5230\u5c5e\u4e8e\u5b83\u81ea\u5df1\u7684\u914d\u7f6e\u90e8\u5206\uff0c\u5373lint-staged\u952e\u4e0b\u9762\u7684\u914d\u7f6e\u3002<br \/>\n\u5728\u6b64\u4f8b\u4e2d\uff0c\u6240\u6709staged\u72b6\u6001\u7684\uff0c\u4e14\u6269\u5c55\u540d\u662f.js, .jsx, \u548c.json\u6587\u4ef6\u90fd\u4f1a\u81ea\u52a8\u4ea4\u7531Prettier\u505a\u683c\u5f0f\u5316\uff0c\u7136\u540e\u518d\u63d0\u4ea4\u3002<\/p>\n<h1>\u4e3a\u4f55\u4e00\u5b9a\u8981\u7528lint-staged<\/h1>\n<p>You might wonder why we don&#8217;t just use Husky to run a few npm scripts.<br \/>\n\u4f60\u53ef\u4ee5\u4f1a\u7591\u60d1\uff0c\u4e3a\u4ec0\u4e48\u4e00\u5b9a\u8981\u7f57\u91cc\u7f57\u55e6\u5730\u7528lint-staged\uff0c\u7528Husky\u76f4\u63a5\u8c03\u7528npm\u811a\u672c\u4e0d\u66f4\u7b80\u5355\u4e48\u3002<br \/>\n\u8fd9\u662f\u56e0\u4e3a\u6211\u4eec\u7528lint-staged\u62ff\u5230staged\u72b6\u6001\u7684\u6587\u4ef6\uff0c\u800c\u4e0d\u662f\u6240\u6709\u7684\u6587\u4ef6\u3002<br \/>\n\u4f60\u7684node\u5de5\u7a0b\u6587\u4ef6\u4e2d\u53ef\u80fd\u5df2\u7ecf\u6709\u5982\u4e0b\u505a\u4ee3\u7801\u683c\u5f0f\u5316\u7684\u811a\u672c<\/p>\n<pre><code class=\"language-json \">\"format\": \"prettier --write '**\/*.{js,jsx}'\"\n<\/code><\/pre>\n<p>\u4f60\u53ef\u80fd\u4f1a\u56e0\u6b64\u5982\u4e0b\u914d\u7f6e<\/p>\n<pre><code class=\"language-json \">\"lint-staged\": {\n  \"*.{js,jsx,json}\": [\"npm run format\", \"git add\"]\n}\n<\/code><\/pre>\n<p>\u5982\u679c\u662f\u8fd9\u6837\u914d\u7f6e\u7684\u8bdd\uff0c\u5c31\u6ca1\u6709\u5fc5\u8981\u7528lint-staged\u4e86\u3002\u56e0\u4e3a\uff0c\u8fd9\u6837\u7684\u914d\u7f6e\u4f1a\u628aprettier\u5e94\u7528\u5230\u6240\u6709\u5339\u914d.js,.jsx.json\u7684\u6587\u4ef6\u4e0a\uff0c\u800c\u4e0d\u662f\u4ec5staged\u72b6\u6001\u7684\u6587\u4ef6\u3002<\/p>\n<h3>\u628a\u8dd1\u5355\u5143\u6d4b\u8bd5\u52a0\u5165\u9884\u63d0\u4ea4\u68c0\u67e5<\/h3>\n<p>Husky\u8fd8\u80fd\u591f\u5e2e\u4f60\u628a\u8dd1\u5355\u5143\u6d4b\u8bd5\u52a0\u5165\u5230\u9884\u63d0\u4ea4\u68c0\u67e5\u4e2d\uff0c\u4fdd\u8bc1\u53ea\u6709\u901a\u8fc7\u4e86\u5355\u5143\u6d4b\u8bd5\u624d\u6b63\u5f0f\u63d0\u4ea4\u4ee3\u7801\u5230\u4ed3\u5e93\u3002<br \/>\n\u5982\u4e0b\u662f\u4e00\u4e2a\u5178\u578b\u7684\u914d\u7f6e\uff1a<\/p>\n<pre><code class=\"language-json \">\"scripts\": {\n    \"test\": \"exit 0\",\n    \"precommit\": \"lint-staged &amp;&amp; npm test\"\n  },\n  \"lint-staged\": {\n    \"*.{js,jsx,json}\": [\"prettier --write\", \"git add\"]\n  }\n<\/code><\/pre>\n<p>\u5b9e\u9645\u9879\u76ee\u4e2d\u8981\u4fee\u6539scripts.test\u90e8\u5206\uff0c\u89c6\u5de5\u7a0b\u4f7f\u7528\u7684\u5355\u5143\u6d4b\u8bd5\u6846\u67b6Jest, \u6216Mocha \uff0c\u672c\u793a\u4f8b\u7b80\u5355\u7684\u8fd4\u56de0\uff0c\u8868\u793a\u65e0\u6761\u4ef6\u901a\u8fc7\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u76ee\u6807 \u4e3a\u9632\u6b62\u63d0\u4ea4\u4e0d\u5408\u683c\u7684\u4ee3\u7801\u6392\u7248\u5230\u4ed3\u5e93\u4e2d\uff0c\u6211\u4eec\u5e0c\u671b\u5728\u63d0\u4ea4\u524d\u683c\u5f0f\u5316\u4ee3\u7801\uff0c\u4f7f\u4e4b\u7b26\u5408\u9879\u76ee\u7684\u4ee3\u7801\u683c\u5f0f\u89c4\u8303\uff0c\u800c\u4e14\u5c3d\u53ef\u80fd\u4fdd\u8bc1\u903b\u8f91\u6b63\u786e\u3002\u5373\u76ee\u6807\u6709\u4e24\u70b9\uff1a 1. \u5bf9git staged\u7684\u4ee3\u7801\u5f3a\u884c\u683c\u5f0f\u5316\uff0c\u4f7f\u7b26\u5408\u89c4\u8303\u3002\u5bf9\u4e8e\u6ca1\u6709\u88abstaged\u7684\u4ee3\u7801\u6216\u6587\u4ef6\uff0c\u5c06\u5b8c\u5168\u5ffd\u7565\u3002 2. \u8dd1\u5355\u5143\u6d4b\u8bd5\u3002\u53ea\u6709\u901a\u8fc7\u4e86\u5355\u5143\u6d4b\u8bd5\u624d\u80fd\u63d0\u4ea4\u4ee3\u7801\u3002 \u5b89\u88c5\u4f9d\u8d56 $ npm install &#8211;save-dev husky lint-staged \u5148\u5b89\u88c5husky\u548clint-staged\u3002\u6ce8\u95f4\u5728\u5b89\u88c5husky\u4e4b\u524d\u9700\u8981\u786e\u4fdd\u5de5\u7a0b\u76ee\u5f55\u5df2\u7ecf\u662f\u4e00\u4e2a\u5408\u6cd5\u7684git\u4ed3\u5e93\u3002\u56e0\u4e3a\uff0c\u5b89\u88c5husky\u65f6\u9700\u8981\u7ed9git\u4ed3\u5e93\u5b89\u88c5\u9884\u63d0\u4ea4\u94a9\u5b50(precommit hook)\u3002 Lint-staged\u63d0\u4f9b\u4e86\u4e00\u4e2a\u5173\u952e\u7684\u529f\u80fd\uff0c\u5b83\u80fd\u627e\u5230\u6240\u6709\u88abgit staged\u7684\u6587\u4ef6\uff0c\u800c\u4e0d\u662f\u5de5\u7a0b\u4e0b\u9762\u6240\u6709\u7684\u6587\u4ef6\uff0c\u7136\u540e\u901a\u8fc7\u7ba1\u9053\u4ea4\u7ed9Prettier\u505a\u683c\u5f0f\u5316\u3002 \u4fee\u6539npm\u811a\u672c \u5bf9npm script\u505a\u5982\u4e0b\u6539\u52a8\uff1a &#8220;scripts&#8221;: { &#8220;precommit&#8221;: &#8220;lint-staged&#8221; }, &#8220;lint-staged&#8221;: { &#8220;*.{js,jsx,json}&#8221;: [&#8220;prettier &#8211;write&#8221;, &#8220;git add&#8221;] } scripts.precommit\u7531Husky\u5904\u7406\uff0c\u5b83\u4f1a\u4f9d\u7167\u914d\u7f6e\u5728\u628a\u4ee3\u7801\u6b63\u5f0f\u63d0\u4ea4\u5230\u4ed3\u5e93\u524d\u8fd0\u884clint-staged(\u5f53\u7136\u6211\u4eec\u4e5f\u53ef\u4ee5\u914d\u7f6e\u5176\u4ed6\u547d\u4ee4\uff09\u3002 Lint-staged\u518d\u627e\u5230\u5c5e\u4e8e\u5b83\u81ea\u5df1\u7684\u914d\u7f6e\u90e8\u5206\uff0c\u5373lint-staged\u952e\u4e0b\u9762\u7684\u914d\u7f6e\u3002 \u5728\u6b64\u4f8b\u4e2d\uff0c\u6240\u6709staged\u72b6\u6001\u7684\uff0c\u4e14\u6269\u5c55\u540d\u662f.js, .jsx, \u548c.json\u6587\u4ef6\u90fd\u4f1a\u81ea\u52a8\u4ea4\u7531Prettier\u505a\u683c\u5f0f\u5316\uff0c\u7136\u540e\u518d\u63d0\u4ea4\u3002 \u4e3a\u4f55\u4e00\u5b9a\u8981\u7528lint-staged You might wonder why we don&#8217;t just use Husky to run a few npm scripts. &hellip; <a href=\"https:\/\/ykyi.net\/?p=1615\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;\u4f7f\u7528Prettier,Husky\u548clint-staged\uff0c\u5728\u63d0\u4ea4javascript\u4ee3\u7801\u524d\u81ea\u52a8\u683c\u5f0f\u5316\u4ee3\u7801&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[62],"class_list":["post-1615","post","type-post","status-publish","format-standard","hentry","category-tech_articles","tag-nodejs"],"_links":{"self":[{"href":"https:\/\/ykyi.net\/index.php?rest_route=\/wp\/v2\/posts\/1615","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ykyi.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ykyi.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ykyi.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ykyi.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1615"}],"version-history":[{"count":0,"href":"https:\/\/ykyi.net\/index.php?rest_route=\/wp\/v2\/posts\/1615\/revisions"}],"wp:attachment":[{"href":"https:\/\/ykyi.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1615"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ykyi.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1615"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ykyi.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1615"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}