Little Miss Robot - Eslint configuration
This package contains configurations for eslint that we, at Little Miss Robot, like to use when working with JavaScript and its frameworks!
This extension can be installed in the project as an npm package and can be
extended in the project eslint configuration. Does this mean you are dependant
on these settings? No, these values can be overwritten in that project eslint
configuration under the rules
key.
Info
This package contains 4 types of configs:
- base
- react
- vue3
- nuxt
Use the right one for the installed framework in your project. We also like to use prettier to make sure our code formatting is consistent and we don't have to worry about stylistic issues.
Install
- Install package
$ npm install --save-dev @littlemissrobot/eslint-config
Usage
- Create a .eslintrc in the root of your project
- Import the default settings for the eslint setup
module.exports = {
extends: ["@littlemissrobot/eslint-config"],
};
- Extend from the right linter .eslintrc:
// Base (no specific framework)
module.exports = {
extends: [
"@littlemissrobot/eslint-config",
"@littlemissrobot/eslint-config/linters/base",
],
};
// React
module.exports = {
extends: [
"@littlemissrobot/eslint-config",
"@littlemissrobot/eslint-config/linters/react",
],
};
// Vue3
module.exports = {
extends: [
"@littlemissrobot/eslint-config",
"@littlemissrobot/eslint-config/linters/vue3",
],
};
// Nuxt
module.exports = {
extends: [
"@littlemissrobot/eslint-config",
"@littlemissrobot/eslint-config/linters/nuxt",
],
};
- Create a .prettierrc in the root of your project and setup its ruleset.
Make sure it does not conflicts with your .editorconfig if you have one. You
can write any special cases per extension in the
overrides
key. For example, the one we like to use:
{
"printWidth": 80,
"tabWidth": 4,
"useTabs": true,
"semi": true,
"singleQuote": false,
"quoteProps": "as-needed",
"jsxSingleQuote": false,
"trailingComma": "es5",
"bracketSpacing": true,
"bracketSameLine": false,
"arrowParens": "always",
"htmlWhitespaceSensitivity": "css",
"vueIndentScriptAndStyle": false,
"endOfLine": "lf",
"overrides": [
{
"files": [
"package.json",
".composer.json",
"*.yml",
"*.md",
"*.php"
],
"options": {
"useTabs": false
}
},
{
"files": ["package.json", "*.yml", "*.md"],
"options": {
"tabWidth": 2
}
},
{
"files": ["composer.json", "*.php"],
"options": {
"tabWidth": 4
}
}
]
}
Issue: When using webpack aliasses
When you work with webpack and you define certain aliasses like @
referring to
./src
, eslint will consider this as a rule break on import/no-unresolved
. It
will log an error like Unable to resolve path to module '@/components'
for
example.
This can be fixed by installing the package eslint-import-resolver-webpack
and
adding the location to the webpack config in your eslint configuration file:
{
settings: {
"import/resolver": {
webpack: {
config: "./.webpack/webpack.dev.js",
},
},
},
}
An alternative fix could be to add this setting with the location of the
directory the alias @
points to:
{
settings: {
"import/resolver": {
node: {
paths: ["./src"],
extensions: [".mjs", ".js", ".json"],
},
},
},
}