@siteone/eslint-config
v3.0.4
Published
SiteOne eslint config package
Downloads
275
Keywords
Readme
SiteOne ESLint config
This package includes the shareable ESLint configuration used by SiteOne. It's meant to be used on react projects.
It just takes recommended configuration from commonly used plugins and wrap's it up in one easy to use bundle. So we can maintain our eslint configuration in one place.
Installation
yarn add eslint @siteone/eslint-config --dev
OR
npm install eslint @siteone/eslint-config --save-dev
Configuration
Paste this in your .eslintrc.js
/* eslintrc.js */
module.exports = {
extends: [
"@siteone/eslint-config/common",
"@siteone/eslint-config/flow", // Remove if you are not using flow
"@siteone/eslint-config/cssmodules", // Remove if you are not using css modules
],
};
Recommended prettier configuration
/* .prettierrc */
{
"tabWidth": 2,
"useTabs": false,
"semi": false,
"singleQuote": true,
"trailingComma": "all"
}
Import aliases
This config uses eslint-plugin-import
so if you are using import aliases you need to configure them like so:
/* eslintrc.js */
const path = require("path");
module.exports = {
extends: [
"@siteone/eslint-config/common",
"@siteone/eslint-config/flow",
"@siteone/eslint-config/cssmodules",
],
settings: {
"import/resolver": {
alias: [
["components", path.join(__dirname, "/src/components/")],
// ...
],
},
},
};
So eslint-plugin-import can resolve imports like:
/* src/components/Button.js */
export default function Button() {
return <button>Click me</button>;
}
/* src/pages/index.js */
import Button from "components/button"; // instead of ../components/Button
More in eslint-plugin-import docs.
NOTE: This wont make your imports work it just tells eslint where to look for them while linting.