@realtby/codestyle

realt.by frontend codestyle tools shared configs

Install

npm i -D @realtby/codestyle

Development

make release # to push new version & generate changelog
make prerelease # only push new version to npm, for testing

How to test publish

In order to locally test the current package with the project infrastructure, you can use npm proxy register Verdaccio

Locally, the easiest way to run it through Docker is to run the following command:

$ docker run -it --rm --name verdaccio -p 4873:4873 verdaccio/verdaccio

To check that everything is working, go to the web ui url in browser: http://localhost:4873

In order to publish and pull the package from the Proxy repository, you need to add the following code to .npmrc

registry=http://localhost:4873

Now you can safely pull and publish to the local npm register!

EditorConfig

Create configuration file .editorconfig at the root of the project. Insert the following content:

root = true

[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
max_line_length = 100
trim_trailing_whitespace = true

[Makefile]
indent_style = tab

ide

If you use Visual Studio Code, install EditorConfig plugin.

Prettier

config

1. Create configuration file .prettierrc.js at the root of the project. Insert the following content:

const config = require('@realtby/codestyle/prettier');
module.exports = config;

2. Also create file .prettierignore, add some ignore patterns:

# ide
.idea/
.vscode/

# npm
node_modules/
package.json
package-lock.json
yarn.lock

# misc
coverage
tsconfig.json

# changelog
*.hbs
CHANGELOG.md

npm

3. Add following lines to yout package.json:

{
  "scripts": {
    "format": "prettier --write ."
  }
}

4. And then use as npm run format

ide

JetBrains IDE

Install extension (It is already bundled to WebStorm). You can read more information in Prettier site.

Visual Studio Code

Install extension. Detailed documentation can be found at the extension page.

ESLint

1. Create configuration file .eslintrc.js at the root of the project. Insert the following content:

module.exports = {
  root: true,
  extends: [
    // choose and enable needed configs
    './node_modules/@realtby/codestyle/eslint/prettier', // prettier first!
    './node_modules/@realtby/codestyle/eslint/base',
    './node_modules/@realtby/codestyle/eslint/typescript',
    './node_modules/@realtby/codestyle/eslint/import',
    // './node_modules/@realtby/codestyle/eslint/react',
    // './node_modules/@realtby/codestyle/eslint/node',
    // './node_modules/@realtby/codestyle/eslint/graphql',
  ],
  overrides: [
    {
      files: ['*.gql'],
      parserOptions: {
        // add schema & operations paths
        // for client
        schema: 'http://api.realt.loc:8000/graphql',
        operations: ['./src/**/*.graphql'],
        // for server
        schema: './src/**/*.gql',
      },
    },
  ],
};

2. Add following lines to your package.json:

{
  "scripts": {
    "lint": "eslint . --ext .ts,.tsx,.js,.jsx,.json --fix --cache --max-warnings=0"
  }
}

3. Also create file .eslintignore, add some ignore patterns:

# ide
.idea/
.vscode/

# npm
**/node_modules/*
package.json

4. Add .eslintcache to .gitignore

Stylelint

TBD

Conventional Commits

• We use Conventional Commits convention.

• You can use @commitizen/cz-cli helper, and then call git-cz, git cz or just git commit

npm i -g commitizen git-cz

• All commit messages checked with commitlint, feel free to add new scope's and type's to changelog.config.js

1. add .cz.json:

{
  "path": "git-cz"
}

2. add changelog.config.js and insert following:

const getChangelogConfig = require('@realtby/codestyle/changelog.config');

module.exports = getChangelogConfig({
  scopes: [
    /* additional scopes */
    'graphql',
  ],
  types: {
    /* additional types */
    temp: ['🚧', 'temporary changes'],
  },
});

3. add commitlint.config.js and insert following:

const getCommitlintConfig = require('@realtby/codestyle/commitlint.config');

const czConfig = require('./changelog.config');

module.exports = getCommitlintConfig(czConfig);

4. add .release-it.js:

module.exports = require('@realtby/codestyle/release-it');

5. add .auto-changelog:

{
  "output": "CHANGELOG.md",
  "template": "./node_modules/@realtby/codestyle/changelog-template.hbs",
  "unreleased": false,
  "commitLimit": false,
  "sort-commits": "date",
  "issueUrl": "https://realtby.atlassian.net/browse/{id}",
  "issuePattern": "REALT-\\d+",
  ".": "https://regex101.com/r/HEBTvr/5",
  "replaceText": {
    "(^[^\n]+)(?:\n)?(?:[^!]+)?(!\\d+)?": "$1 $2"
  }
}

6. Add following lines to your package.json:

{
  "scripts": {
    "commit": "git-cz",
    "changelog": "auto-changelog -p && git add CHANGELOG.md",
    "release": "release-it"
  }
}

7. npm i -D auto-changelog + add patch from codestyle/patches

8. add badges to README.md

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)

lint-staged & husky

1. add lint-staged.config.js and insert following:

module.exports = {
  '*.@(js|jsx|ts|tsx)': ['prettier --write', 'eslint --fix'],
};

2. add .husky folder to .gitignore

3. run husky install in your project root

You can extend current husky hooks, by adding scripts in you package.json:

• "husky:commit-msg": "commitlint --edit $HUSKY_GIT_PARAMS"
• "husky:pre-commit": "lint-staged"
• "husky:pre-push": "npm run type-check"
• "husky:prepare-commit-msg": "exec < /dev/tty && git cz --hook || true"

Note: If node_modules are installed and you decide to delete the .husky folder then you need to delete all node_modules and install them again.