I'm not sure if there's a bug with something I'm using or whether I've just set something up wrong here, but I'm getting this error from eslint when running eslint src --fix
about "eslint-plugin-@typescript-eslint"
I've specified the plugin as listed in the @TypeScript-eslint docs but I'm getting this weird error where eslint is trying to add 'eslint-plugin-' to the start of the plugin name (the package name is @typescript-eslint/eslint-plugin
)
I'm using Gatsby and the accompanying TypeScript plugin.
Error
$ eslint src --fix
Oops! Something went wrong! :(
ESLint: 4.19.1.
ESLint couldn't find the plugin "eslint-plugin-@typescript-eslint". This can happen for a couple different reasons:
1. If ESLint is installed globally, then make sure eslint-plugin-@typescript-eslint is also installed globally. A globally-installed ESLint cannot find a locally-installed plugin.
2. If ESLint is installed locally, then it's likely that the plugin isn't installed correctly. Try reinstalling by running the following:
npm i eslint-plugin-@typescript-eslint@latest --save-dev
.eslintrc.js:
module.exports = {
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 2018,
sourceType: 'module',
},
env: {
browser: true,
node: true,
es6: true,
'jest/globals': true,
},
plugins: ['@typescript-eslint', 'react', 'jest'],
extends: [
'standard',
'plugin:react/recommended',
'plugin:@typescript-eslint/recommended',
'plugin:jest/recommended',
'plugin:prettier/recommended',
// 'eslint-config-prettier', // must be last
'prettier/@typescript-eslint',
],
rules: {
'react/prop-types': 0,
'jsx-quotes': ['error', 'prefer-single'],
'react/no-unescaped-entities': 0,
},
settings: {
react: {
version: 'detect',
},
linkComponents: [
// Components used as alternatives to <a> for linking, eg. <Link to={ url } />
'Hyperlink',
{ name: 'Link', linkAttribute: 'to' },
],
},
}
package.json
{
"name": "jmulholland.com",
"description": "My personal website",
"license": "MIT",
"scripts": {
"dev": "gatsby develop",
"build": "gatsby build",
"serve": "gatsby serve",
"lint": "eslint src --fix",
"prettier": "prettier \"**/*.+(js|jsx|ts|tsx|json|css|md|mdx|graphql)\"",
"format": "yarn prettier --write",
"type-check": "tsc --noEmit",
"validate": "yarn lint && yarn prettier --list-different"
},
"dependencies": {
"gatsby": "^2.1.4",
"gatsby-plugin-react-helmet": "^3.0.6",
"gatsby-plugin-styled-components": "^3.0.5",
"gatsby-plugin-typescript": "^2.0.10",
"gatsby-plugin-typography": "^2.2.7",
"gatsby-remark-prismjs": "^3.2.4",
"gatsby-source-contentful": "^2.0.29",
"gatsby-transformer-remark": "^2.3.0",
"prismjs": "^1.15.0",
"prop-types": "^15.7.2",
"react": "^16.8.2",
"react-dom": "^16.8.2",
"react-helmet": "^5.2.0",
"react-typography": "^0.16.18",
"styled-components": "^4.1.3",
"typography": "^0.16.18"
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^1.4.2",
"@typescript-eslint/parser": "^1.4.2",
"babel-jest": "^24.1.0",
"babel-plugin-styled-components": "^1.10.0",
"babel-preset-gatsby": "^0.1.8",
"dotenv": "^6.0.0",
"eslint": "^4.19.1",
"eslint-config-prettier": "^4.1.0",
"eslint-config-standard": "^12.0.0",
"eslint-plugin-import": "^2.16.0",
"eslint-plugin-jest": "^22.3.0",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-node": "^8.0.1",
"eslint-plugin-prettier": "^3.0.1",
"eslint-plugin-promise": "^4.0.1",
"eslint-plugin-react": "^7.11.1",
"eslint-plugin-standard": "^4.0.0",
"faker": "^4.1.0",
"husky": "^1.3.1",
"jest": "^24.1.0",
"lint-staged": "^8.1.5",
"prettier": "^1.16.4",
"typescript": "^3.3.3333"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
}
}
Solution was simply to upgrade to the latest version of eslint