eslint-config-thechatshop-typescript-prettier

ESLint + Prettier Typescript shareable config for thechatshop’s coding style

Install

yarn add -D eslint-config-thechatshop-typescript-prettier eslint prettier eslint-plugin-import eslint-plugin-unicorn eslint-plugin-prettier eslint-config-prettier eslint-import-resolver-typescript typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser  

Then, add this to your .eslintrc.js:

module.exports = {
	extends: "thechatshop-typescript-prettier",
	rules: {
		// your overrides
	},
};

With React support

npx install-peerdeps --dev eslint-config-thechatshop-typescript-prettier

Then, add this to your .eslintrc.js:

module.exports = {
	extends: "thechatshop-typescript-prettier/with-react",
	rules: {
		// your overrides
	},
};

Add .eslintignore for certain files

Personally we like to use this .eslintignore:

*.css
*.svg

(Optional) Add .prettierrc.json with our preferred configuration

{
    "printWidth": 100,
    "trailingComma": "es5",
    "tabWidth": 4,
    "semi": true,
    "singleQuote": true
}

(Optional) Linting with vscode

If you are using vscode this .vscode/settings.json file may come in handy:

{
    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
    "editor.formatOnSave": true,
    "eslint.alwaysShowStatus": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "editor.rulers": [100]
}

Vscode plugins

• ESLint
• Prettier - Code formatter

TODO

Write better tests