@littlemissrobot/eslint-config

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

1. Install package

$ npm install --save-dev @littlemissrobot/eslint-config

Usage

1. Create a .eslintrc in the root of your project
2. Import the default settings for the eslint setup

module.exports = {
  extends: ["@littlemissrobot/eslint-config"],
};

3. 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",
  ],
};

4. 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"],
			},
		},
	},
}