内容简介:Tools and methodologies that will help you maintain consistency in your JavaScript code style.Prefer watching a video instead of reading an article, check this out. Of course, you should do both!Maintaining a consistent code style is not always easy. Previ
Tools and methodologies that will help you maintain consistency in your JavaScript code style.
Apr 8 ·4min read
Video
Prefer watching a video instead of reading an article, check this out. Of course, you should do both!
Consistency
Maintaining a consistent code style is not always easy. Previously this had to be manually policed with code reviews. Making sure all files conform to the project’s standards can be tedious and a big-time waster.
Fortunately there are a handful of tools to automate these repetitive tasks.
Bit.dev
Bit.dev is a cloud component hub. It’s a place to publish, document and organize JS components. It is not a code-style validator but it’s definitely helpful in standardizing code style as it makes reusing code so much easier.
Reusing code, in and across repositories, is essential for standardized and clear code.
Prettier
Prettier is the most popular code formatter for JavaScript applications. With Prettier, we no longer have to worry about code style, just press save and let Prettier handle it.
- An opinionated code formatter
- Supports many languages
- Integrates with most editors
- Has few options
Install Prettier
Install the VSCode extension
Prettier - Code formatter
Edit description
marketplace.visualstudio.com
Install the prettier
NPM Package
npm install --save-dev prettier
Note: There seems to be a minor conflict between the Prettier plugin and Prettier 2.0 which just came out. I was able to solve this by setting this rule in the .prettierrc.yml
file.
arrowParens: always
ESLint
ESLint will analyze our code to prevent problems before committing to the codebase.
ESLint statically analyzes your code to quickly find problems.
Many problems ESLint finds can be automatically fixed.
Install the VSCode extension
ESLint
Edit description
marketplace.visualstudio.com
Install the eslint
NPM Package
npm install --save-dev eslint
Add lint
to package.json. I also like to add a postlint
so we can see some positive feedback after it runs.
{ "scripts": { "lint": "eslint src", "postlint": "echo :white_check_mark: lint valid" } }
Prettier + ESLint
There’s a few extra steps we need to do to get these two pieces of software to play nice together.
Install the eslint-plugin-prettier
NPM Package.
npm install --save-dev eslint-plugin-prettier eslint-config-prettier
Create .eslintrc.yml
, add the prettier
plugin, extend both Prettier and ESLint recommended settings and set the prettier rules to error
.
plugins: - prettier extends: - eslint:recommended - plugin:prettier/recommended env: es6: true node: true browser: true rules: prettier/prettier: error
VSCode
You may need to restart VSCode after making changes to your ESLint file.
If your format-on-save is formatting differently than the rules are setup, restart VSCode.
You may need to enable format-on-save in VSCode.
Husky
Husky is the guard for your repository to stop bad code from enter your codebase.
Install the husky
NPM Package
npm install --save-dev husky
Add a husky
section to the package.json
.
{ "husky": { "hooks": { "pre-commit": "npm run lint" } }
Here we are connecting to the pre-commit
hook. This hook will run before each git commit
, potentially blocking the bad code before it can enter the git repo.
This
Read the Husky docs for more info about other hooks you can connect to.
Summary
- Use Prettier to format your code on save.
- ESLint will analyze your codebase for issues.
- Husky will run these tasks before each commit.
Check out my Twitter for more tips: @joelnet
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
自媒体写作,从基本功到实战方法
余老诗 / 清华大学出版社 / 2018-9-1 / 59.00元
《自媒体写作》是一本系统而通俗易懂的自媒体写作指导书。 全书共分为10章,分别从写作基本功、新媒体认知、新媒体传播规律和自媒体作者阅读写作素养以及如何进阶等方面展开,结合简书、公众号、今日头条等主流自媒体所选例文,讲解写作知识和新媒体特点,内容详实,有理有据,非常适合自媒体写作爱好者自学。 尤其值得一提的是,写作基本功部分从原理、方法和技巧三个层面展开论说,让自媒体写作学习者既能从根本......一起来看看 《自媒体写作,从基本功到实战方法》 这本书的介绍吧!