Skip to main content

UI Code Style

· 2 min read
Jiaqi Liu

In Frontend dev realm, there are lots of code style checker. Assembling all of them together takes efforts and pains. This action runs the following two code style checker specifically for frontend dev:

  1. Prettier
  2. ESLint

This action assume ESLint, typescript-eslint, and Prettier have been installed, which can be done with:

yarn add --dev @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint typescript
yarn add --dev --exact prettier

Here is an example usage of the action:

name: CI/CD

"on":
  pull_request:
  push:
    branches:
      - master

  code-style:
    name: React & TS Code Style Check
    uses: QubitPi/hashicorp-aws/.github/workflows/ui-code-style.yml@master
    with:
      node-version: 18
tip

In the example above, the node 18 is used in the CI/CDed project.

The configurations of Prettier and ESLint can be done regularly by following their respective documentations. For example, the .prettierrc.json and .prettierignore can be placed at the project root with the following contents:

.prettierrc.json
{
  "tabWidth": 2,
  "useTabs": false,
  "printWidth": 120
}
.prettierignore
*.md
*.mdx
build
coverage
node_modules
tip

We can fix it by formatting all files at the root of project with:

yarn prettier . --write

Initial ESLint configuration template can be generated with

yarn run eslint --init # https://dev.to/maithanhdanh/configuration-for-eslint-b47
Prettier & ESLint Conflict

Linters usually contain not only code quality rules, but also stylistic rules. Most stylistic rules are unnecessary when using Prettier, but worse - they might conflict with Prettier! Use Prettier for code formatting concerns, and linters for code-quality concerns, as outlined in Prettier vs. Linters.

Luckily it's easy to turn off rules that conflict or are unnecessary with Prettier, by using these pre-made configs:

yarn add --dev eslint-config-prettier