appunite-frontend-code-formatting.md

Code formatting & linting

In AppUnite, we enforce proper code style by:

1. formatting of all our **/*.{js,jsx,ts,tsx,css,less,scss} files with prettier,

2. linting all **/*.js files with ESLint,

3. linting all **/*.ts files with TSLint.

Code style is enforced by the following ways:

1. Our IDE autoformats our code after each file save.

2. On each commit, git is running a pre-commit hook (configured with husky), that runs formatter and lint checks for our commited files. (NOTE: If for some reasons you want to skip the pre-commit hook, you can run git commit --no-verify.)

3. Last but not least, our CI will also check our whole code base for proper code style with npm run format-test && npm run lint commands and fail when it's badly formatted or has lint errors.

IDE Setup

We strongly recommend to configure your IDE to show all ESLint errors on-the-fly and also automatically format your files on save:

• VSCode:

  1. Install prettier-vscode.
  2. Add "editor.formatOnSave": true into your user settings.

• Atom:

  1. Install prettier-atom.
  2. Enable Atom → Preferences... → Packages, find Prettier Atom toggle Format Files on Save.

• VIM:

  1. Install vim-prettier and vim-autoformat, e.g. using Plug

Plug 'prettier/vim-prettier', {
  \ 'do': 'yarn install',
  \ 'for': ['javascript', 'typescript', 'css', 'less', 'scss', 'json'] }

2. Configure them in .vimrc

" prettier
let g:prettier#autoformat = 0
autocmd BufWritePre *.js,*.jsx,*.css,*.less,*.scss,*.json Prettier