So I'm getting these missing file extension errors for .ts and .tsx files for some reason. Apparently having the same issue as this user: https://stackoverflow.com/questions/59265981/typescript-eslint-missing-file-extension-ts-import-extensions

We usually use the following:

env: {
  browser: true,
  node: true,
  jest: true,
}

So it might make sense to have them on by default, especially with CRA configurations.

We probably should have TypeScript extension rules enabled, for example:

https://github.com/iamturns/eslint-config-airbnb-typescript/blob/master/lib/shared.js

https://github.com/typescript-eslint/typescript-eslint/blob/master/docs/getting-started/linting/FAQ.md#i-am-using-a-rule-from-eslint-core-and-it-doesnt-work-correctly-with-typescript-code

I am using a rule from ESLint core, and it doesn't work correctly with TypeScript code

This is a pretty common thing because TypeScript adds new features that ESLint doesn't know about.

The first step is to check our list of "extension" rules here. An extension rule is simply a rule which extends the base ESLint rules to support TypeScript syntax. If you find it in there, give it a go to see if it works for you. You can configure it by disabling the base rule, and turning on the extension rule. Here's an example with the semi rule:

{
 "rules": {
   "semi": "off",
  "@typescript-eslint/semi": "error"
 }
}

If you don't find an existing extension rule, or the extension rule doesn't work for your case, then you can go ahead and check our issues. The contributing guide outlines the best way to raise an issue.

We release a new version our tooling every week. Please ensure that you check our the latest list of "extension" rules before filing an issue.

npm ERR! code E403
npm ERR! 403 403 Forbidden - PUT https://registry.npmjs.org/eslint-config-motley-typescript - Two-factor authentication is required to publish this package but an automation token was specified
npm ERR! 403 In most cases, you or one of your dependencies are requesting
npm ERR! 403 a package version that is forbidden by your security policy, or
npm ERR! 403 on a server you do not have access to.

Weird 🤔

Running motley-eslint-init should automatically create .eslintrc.js if it does not exist yet.

module.exports = {
  "extends": "motley",
};

There's a new warning:

⚠ Some of your tasks use git add command. Please remove it from the config since all modifications made by tasks will be automatically added to the git commit index.

Would be pretty neat I guess?

https://github.com/amilajack/eslint-plugin-compat

motley-eslint-init should be run automatically when the package is installed.

I gave this a shot earlier using lifecycle hooks, but ended up in an infinite loop of yarn install.

Husky v5 (and v6) has done complete overhaul on how it works.

We could opt-in for a simpler version with

https://github.com/toplenboren/simple-git-hooks

which is recommended by lint-staged.

For whatever reasons 🤔

Instead send the following warning:

eslintrc.js already exists; make sure that you extend motley in the config:

 module.exports = {
   extends: 'motley',
   env: {
     browser: true,
     node: true,
     jest: true,
   }
};

This rule sucks and has nothing to do with anything, at worst it just makes the code way more verbose

https://eslint.org/docs/rules/prefer-destructuring

eg.

function FU(props) {
  return props.children // blah blah blah prefer-destructing
}

The postinstall script now adds the--single-quote --trailing-comma all flags to the prettier command in package.json. This works well for the precommit hook, but if the developer has enabled a prettier-plugin in the editor which prettifies the files on save, those rules aren't picked up, but need to be separately specified in a .prettierrc file leading to duplication and potential WTFs.

If the postinstall script instead would create the aforementioned .prettierrc and place the rules there, the precommit hook and potential editor-plugins would read the rules from that file and everyone is 🌞

Any problems with this?

Hi, just tried out Vite 2 and it's not compatible with TS3 anymore. The Typescript side would need a version bump. This would not break any other setup as this is config is a one-off.

This is not right, should reference the stable (though they are the same)

https://typescript-eslint.io/linting/troubleshooting/performance-troubleshooting/#eslint-plugin-prettier

This plugin surfaces Prettier formatting problems at lint time, helping to ensure your code is always formatted. However this comes at a quite a large cost - in order to figure out if there is a difference, it has to do a Prettier format on every file being linted. This means that each file will be parsed twice - once by ESLint, and once by Prettier. This can add up for large codebases.

Instead of using this plugin, we recommend using Prettier's --check flag to detect if a file has not been correctly formatted.

On larger codebases, this definitely seems noticeable.

Maybe? Could be useful, I guess. https://github.com/apollographql/eslint-plugin-graphql

🤔

Getting this error when creating a new project with CRA (javascript) and starting it:

Most likely related to these new features React 17 provided:

Because the new JSX transform will automatically import the necessary react/jsx-runtime functions, React will no longer need to be in scope when you use JSX. This might lead to unused React imports in your code.

The CRA installs eslint@^3.16.0, and when the airbnb installation script is run, it doesn't install [email protected], leading to config errors (huh? breaking changes in minor updates?).

This is solved by running yarn add [email protected] manually, but we should find a way do that anyways 🤔

Installing on Windows fails with 'lib' is not recognized as an internal or external command, operable program or batch file.

This is due to postinstall being called with lib/postinstall.js. We would need to make the path crossplatform I guess?

Eslint 7.7.0 is out, the 6->7 contains some small breaking changes so it might cause some extra work.

Also bump airbnb config to 18.2.0 etc.

This now happens with v13 at least:

Oops! Something went wrong! :(

ESLint: 7.11.0

ESLint couldn't find the config "motley" to extend from. Please check that the name of the config is correct.

The config "motley" was referenced from the config file in "/Users/Nykanen/Projects/other/.eslintrc.js".

If you still have problems, please stop by https://eslint.org/chat/help to chat with the team.

Staging just hunks of files using interactive add still commits the whole file since the whole file is re-added after processing.

Lint errors go unnoticed unless the developer has a linter enabled in the editor, an even then the developer can choose to ignore lint errors. Perhaps we could force linting of staged files?

  "lint-staged": {
    "*.{js,json,graphql,md,css,scss,less,ts}": [
+     "eslint --fix",
      "prettier --write",
      "git add"
    ]
  }