linz / style-js

LINZ {Java,Type}script style guide, with built in linting and formatting

@linzjs/style

NPM configuration for base typescript projects

Includes:

• Prettier
• Eslint
• Typescript

And configuration for saneish defaults, which can be extended

Most of these are the raw defaults/recommended settings from typescript, eslint and prettier.

export class FooBar {
  get foo(): number {
    return 1;
  }

  async bar(): Promise<string> {
    return 'bar';
  }

  /**
   * @param foo foo to bar
   */
  fooBar(foo = 'foo'): string {
    return `${foo}bar`;
  }
}

IDE Usage

Usage VS Code

1. Install eslint using the extensions menu
2. Add the following to your settings.json

"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
},
"eslint.validate": ["javascript"],

Usage with IntelliJ

IntelliJ has ESLint support by default,

1. Open the settings in Languages & Frameworks > JavaScript > Code Quality Tools > ESLint
2. Check Automatic ESLint Configuration

Project Usage

1. Install LINZ Style

npm install @linzjs/style

2. Applying eslint config There are two ways to apply the config

Either create the base configuration files

# If on windows run `node ./node_modules/@linzjs/style/build/src/install.js`
# - tsconfig.json
# - .eslintrc.cjs
# - .prettierrc.cjs
npx linz-style-install

Or extend your existing eslintrc.js config

Example extending the .eslintrc.js file in your project

module.exports = {
  extends: ["./node_modules/@linzjs/style/.eslintrc.cjs"],

  overrides: [
    {
      /** Overrides for typescript */
      files: ["**/*.ts", "**/*.tsx"],      
      rules: {
        "@typescript-eslint/super-crazy-hook-rule": "error",
      },
    },
  ]
}

3. Apply the formatting/linting to all source code

npx eslint .

Migration from 3.x to 4.x

See Migration Docs

style-js's Issues

"eslint-config-prettier" upgrade to v8.x breaks with with dependency to linz/style-js

Error: Cannot read config file: C:\Users\KHackemesser\code\landonline-auth-service\example-client-app\web\node_modules\[email protected]
Error: "prettier/@typescript-eslint" has been merged into "prettier" in eslint-config-prettier 8.0.0. See: https://github.com/prettier/eslint-config-prettier/blob/main/CHANGELOG.md#version-800-2021-02-21
Referenced from: C:\Users\KHackemesser\code\landonline-auth-service\example-client-app\web.eslintrc.js
at Object. (C:\Users\KHackemesser\code\landonline-auth-service\example-client-app\web\node_modules\[email protected]:1:69)
at Module._compile (C:\Users\KHackemesser\code\landonline-auth-service\example-client-app\web\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Module.require (internal/modules/cjs/loader.js:952:19)
at module.exports (C:\Users\KHackemesser\code\landonline-auth-service\example-client-app\web\node_modules@eslint\eslintrc\node_modules\import-fresh\index.js:32:59)
at loadJSConfigFile (C:\Users\KHackemesser\code\landonline-auth-service\example-client-app\web\node_modules@eslint\eslintrc\lib\config-array-factory.js:225:16)
at loadConfigFile (C:\Users\KHackemesser\code\landonline-auth-service\example-client-app\web\node_modules@eslint\eslintrc\lib\config-array-factory.js:309:20)
at ConfigArrayFactory._loadConfigData (C:\Users\KHackemesser\code\landonline-auth-service\example-client-app\web\node_modules@eslint\eslintrc\lib\config-array-factory.js:609:42)
npm ERR! code 2
npm ERR! path C:\Users\KHackemesser\code\landonline-auth-service\example-client-app\web

Dependabot should create "feat"

To get the change log to update properly dependabot should create pull requests with feat(deps): typescript 4.0.0 rather than build(deps)

but not for dev deps

v3.4.0: eslint-plugin "@typescript-eslint/eslint-plugin" was not found

Having this issue when upgrading to 3.4.0:

Oops! Something went wrong! :(

ESLint: 7.32.0

ESLint couldn't find the plugin "@typescript-eslint/eslint-plugin".

(The package "@typescript-eslint/eslint-plugin" was not found when loaded as a Node module from the directory "/home/epascoal/UbuntuCode/geodetic-feedback-webapp/web".)

It's likely that the plugin isn't installed correctly. Try reinstalling by running the following:

    npm install @typescript-eslint/eslint-plugin@latest --save-dev

The plugin "@typescript-eslint/eslint-plugin" was referenced from the config file in ".eslintrc.js#overrides[0]".

If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team.

I can get it work when using @linzjs/style: 3.3.0 with typescript: 4.5.2 but I will get a warning:

=============

WARNING: You are currently running a version of TypeScript which is not officially supported by @typescript-eslint/typescript-estree.

You may find that it works just fine, or you may not.

SUPPORTED TYPESCRIPT VERSIONS: >=3.3.1 <4.5.0

YOUR TYPESCRIPT VERSION: 4.5.2

Please only submit bug reports when using the officially supported version.

=============

Consider adding "eslint-plugin-simple-import-sort"

To automatically sort imports/exports

https://github.com/lydell/eslint-plugin-simple-import-sort

Can we set default endOfLine for prettier?

Current - There is no config set for endOfLine in prettier.
Proposal - can we set prettier config endOfLine to auto?

Reason - When we use default configuration on Windows machines, the prettier complains to 'delete CR' in IntelliJ. This is because

• IntelliJ defaults line endings to CRLF
• Git for Windows default installation option is 'Checkout Windows-style and commit Unix-style'

Because the files pushed to GitHub have only Line Feeds, whereas IntelliJ adds CR to them, the prettier complains to delete CR on every line.

Adding endOfLine: "auto" will save people from adding additional line in their local .prettierrc and work with all default options (intellij, git for windows, etc) on windows machines (also linux, macx?)