Tools for Consistent JavaScript Code Style

栏目: IT技术 · 发布时间: 4年前

内容简介: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

Tools for Consistent JavaScript Code Style

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.

Tools for Consistent JavaScript Code Style
Exploring shared React components in Bit.dev

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.

Tools for Consistent JavaScript Code Style
prettier-icon-8884
  • An opinionated code formatter
  • Supports many languages
  • Integrates with most editors
  • Has few options

Install Prettier

Install the VSCode extension

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.

Tools for Consistent JavaScript Code Style

ESLint statically analyzes your code to quickly find problems.

Many problems ESLint finds can be automatically fixed.

Install the VSCode extension

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

Tools for Consistent JavaScript Code Style

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

Tools for Consistent JavaScript Code Style
woof!

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

Tools for Consistent JavaScript Code Style

Cheers!

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

数据库系统概念

数据库系统概念

(美)Abraham Silberschatz、(美)Henry F.Korth、(美)S.Sudarshan / 杨冬青、李红燕、唐世渭 / 机械工业出版社 / 2012-3 / 99.00元

【编辑推荐】 数据库领域的殿堂级作品 夯实数据库理论基础,增强数据库技术内功的必备之选 对深入理解数据库,深入研究数据库,深入操作数据库都具有极强的指导作用! 【内容简介】 本书是数据库系统方面的经典教材之一,其内容由浅入深,既包含数据库系统基本概念,又反映数据库技术新进展。它被国际上许多著名大学所采用,包括斯坦福大学、耶鲁大学、得克萨斯大学、康奈尔大学、伊利诺伊大学......一起来看看 《数据库系统概念》 这本书的介绍吧!

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具