not catching no-implicit-any

[tsujp]

~~I cannot seem to get import-sort-style-module to work with prettier-standard, likely as it uses prettierx under the hood right? Does anyone have any guidance there to prevent conflicts.~~

This became about not catching no-implicit-any

[sheerun]

Could you share your setup?

[tsujp]

Certainly:

sublime-text using sublimejsprettier calling prettier-standard

{
  "auto_format_on_save": true,
  "prettier_cli_path": "/tmp/fnm-shell-4267355/bin/prettier-standard"
}

.eslintrc.js

module.exports = {
  root: true,
  env: {
    es6: true,
    node: true,
  },
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 2018,
    project: './tsconfig.json',
    tsconfigRootDir: __dirname,
    createDefaultProgram: true,
  },
  extends: [
    'plugin:@typescript-eslint/recommended',
    'standard',
    'standard-react',
  ],
  plugins: ['@typescript-eslint/eslint-plugin', 'react-hooks'],
  rules: {
    'react/prop-types': 'off',
    'react-hooks/rules-of-hooks': 'error',
    'react-hooks/exhaustive-deps': 'warn',
    '@typescript-eslint/no-use-before-define': [
      'error',
      {
        // hoist functions (not variables)
        functions: false,
      },
    ],
    '@typescript-eslint/no-explicit-any': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/interface-name-prefix': 'off',
    '@typescript-eslint/member-delimiter-style': [
      'error',
      {
        // no delimiters for interfaces
        multiline: {
          delimiter: 'none',
          requireLast: false,
        },
        singleline: {
          delimiter: 'comma',
          requireLast: false,
        },
      },
    ],
    '@typescript-eslint/indent': 'off',
    'no-unused-vars': 'off',
    'node/no-unsupported-features/es-syntax': 'off',
    'comma-dangle': ['error', 'always-multiline'],
    'react/react-in-jsx-scope': 'off',
  },
}

package.json

{
  "name": "www",
  "version": "0.1.0",
  "repository": "[email protected]:tsujp/jec.sh-www.git",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "importSort": {
    ".ts, .tsx": {
      "style": "eslint",
      "parser": "typescript"
    }
  },
  "dependencies": {
    "next": "9.4.4",
    "normalize.css": "^8.0.1",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-is": "^16.8",
    "styled-components": "^5.1.1"
  },
  "devDependencies": {
    "@arkweid/lefthook": "^0.7.2",
    "@commitlint/cli": "^9.0.1",
    "@commitlint/config-conventional": "^9.0.1",
    "@now/node": "^1.7.1",
    "@types/node": "14.0.18",
    "@types/react": "^16.9.41",
    "@types/styled-components": "5.1.1",
    "@typescript-eslint/eslint-plugin": "^3.6.0",
    "@typescript-eslint/parser": "3.6.0",
    "babel-plugin-styled-components": "^1.10.7",
    "eslint": "^7.4.0",
    "eslint-config-standard": "^14.1.1",
    "eslint-config-standard-jsx": "^8.1.0",
    "eslint-config-standard-react": "^9.2.0",
    "eslint-plugin-import": "^2.22.0",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-react": "^7.20.3",
    "eslint-plugin-react-hooks": "^4.0.5",
    "eslint-plugin-standard": "^4.0.1",
    "import-sort-parser-typescript": "^6.0.0",
    "import-sort-style-eslint": "^6.0.0",
    "prettier-plugin-import-sort": "^0.0.4",
    "prettier-standard": "^16.3.0",
    "standard-version": "^8.0.0",
    "stylelint": "^13.6.1",
    "stylelint-config-recommended": "^3.0.0",
    "stylelint-config-styled-components": "^0.1.1",
    "stylelint-processor-styled-components": "^1.10.0",
    "typescript": "^3.9.6",
    "typescript-eslint-language-service": "^3.0.0",
    "typescript-styled-plugin": "^0.15.0"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "rootDir": "./src",
    "baseUrl": "./src",
    "paths": {
      "@/*": ["./*"]
    },
    "target": "es6",
    "module": "esnext",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    "plugins": [
      {
        "name": "typescript-eslint-language-service"
      },
      {
        "name": "typescript-styled-plugin"
      }
    ]
  },
  "exclude": ["node_modules", "**/node_modules/**", ".next", "dist"],
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.d.ts"]
}

[sheerun]

Please remove all eslint, eslint-plugin-, and eslint-config from dependencies (prettier-standard includes them),

[sheerun]

Also currently prettier-standard requires eslint 6.x

[tsujp]

But then when I try and run yarn eslint . for instance I cannot do so as it's missing the config and plugins.

[sheerun]

Prettier-standard has built-in linting with --lint flag

On Wed, 8 Jul 2020 at 04:24, Jordan [email protected] wrote:

But then when I try and run yarn eslint . for instance I cannot do so as it's missing the config and plugins.

— You are receiving this because you commented.

Reply to this email directly, view it on GitHub https://github.com/sheerun/prettier-standard/issues/105#issuecomment-655242102, or unsubscribe https://github.com/notifications/unsubscribe-auth/AACHMDJ6EORPF4B6XMNWPRTR2PKHJANCNFSM4OS4EGSQ .

[tsujp]

Oh right... I read the README and I still didn't absorb that.. whoops. I shall try again later, however one more thing: I think when I was trying this it didn't pick up on actual linting errors I had configured relating to eslint, for instance no-implicit-any. I can see my LSP in Sublime Text complaining and if I try and build the project it complains but it passed prettier-standard.

[sheerun]

In your configuration I see only no-explicit-any, there's no no-implicit-any

[tsujp]

@sheerun right I've reduced a lot of the stuff from my configs and I will re-paste them here, I am still getting the same problem. Here are example logs first:

here I run `yarn build` which executes `next build` as this is for next.js

yarn run v1.22.4
$ next build
> Using external babel configuration
> Location: "/home/tsujp/gdrive/work/niau/self/~jec.sh/www/.babelrc.js"
Creating an optimized production build  

Failed to compile.

/home/tsujp/gdrive/work/niau/self/~jec.sh/www/src/pages/_document.tsx
ERROR in /home/tsujp/gdrive/work/niau/self/~jec.sh/www/src/pages/_document.tsx(7,29):
7:29 Binding element 'renderPage' implicitly has an 'any' type.
     5 | 
     6 | export default class MyDocument extends Document {
  >  7 |   static getInitialProps ({ renderPage }) {
       |                             ^
     8 |     const sheet = new ServerStyleSheet()
     9 | 
    10 |     const page = renderPage((App) => (props: any) =>


> Build error occurred
Error: > Build failed because of webpack errors
    at build (/home/tsujp/gdrive/work/niau/self/~jec.sh/www/node_modules/next/dist/build/index.js:13:917)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

The build correctly fails, there is no type for the prop renderPage and that's an intentional problem so I can verify things are working. My LSP shows me this error while coding, and when building the app it of course fails so I'd expect to see a failure at the linting stage to prevent builds failing.

here I run `prettier-standard --lint` for all files in my repo, and it passes where it should fail

Lefthook v0.7.2
RUNNING HOOKS GROUP: pre-commit

  EXECUTE > format-y-lint-staged
yarn run v1.22.4
$ '/home/tsujp/gdrive/work/niau/self/~jec.sh/www/node_modules/.bin/prettier-standard' --lint .babelrc.js .eslintrc.js .prettierrc.js next-env.d.ts next.config.js src/components/navigation/MainFooter.tsx src/pages/_app.tsx src/pages/_document.tsx src/pages/index.tsx
.babelrc.js 393ms
.eslintrc.js 7ms
.prettierrc.js 3ms
next-env.d.ts 19ms
next.config.js 134ms
src/components/navigation/MainFooter.tsx 9ms
src/pages/_app.tsx 10ms
src/pages/_document.tsx 12ms
src/pages/index.tsx 30ms
All matched files use Standard code style!
Done in 1.19s.

This should be failing with the same error above and I do not know why it isn't. It is executed via LeftHook pre-commit manually using npx lefthook run pre-commit so that I don't have to do pretend commits. If I point it directly to the file instead outside of LeftHook the result is exactly the same.

run: yarn prettier-standard --lint {all_files}

Configs:

.eslintrc.js

module.exports = {
  root: true,
  env: {
    es6: true,
    node: true,
    browser: true,
  },
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 2018,
    project: './tsconfig.json',
    tsconfigRootDir: __dirname,
  },
  extends: ['plugin:@typescript-eslint/recommended'],
  plugins: ['@typescript-eslint/eslint-plugin'],
  rules: {
    // 'react/prop-types': 'off',
    // 'react-hooks/rules-of-hooks': 'error',
    // 'react-hooks/exhaustive-deps': 'warn',
    // '@typescript-eslint/no-use-before-define': [
    //   'error',
    //   {
    //     // hoist functions (not variables)
    //     functions: false,
    //   },
    // ],
    // '@typescript-eslint/no-explicit-any': 'off',
    // '@typescript-eslint/explicit-function-return-type': 'off',
    // '@typescript-eslint/interface-name-prefix': 'off',
    // '@typescript-eslint/member-delimiter-style': [
    //   'error',
    //   {
    //     // no delimiters for interfaces
    //     multiline: {
    //       delimiter: 'none',
    //       requireLast: false,
    //     },
    //     singleline: {
    //       delimiter: 'comma',
    //       requireLast: false,
    //     },
    //   },
    // ],
    // '@typescript-eslint/indent': 'off',
    // 'no-unused-vars': 'off',
    // 'node/no-unsupported-features/es-syntax': 'off',
    // 'comma-dangle': ['error', 'always-multiline'],
    // 'react/react-in-jsx-scope': 'off',
  },
}

tsconfig.json

{
  "compilerOptions": {
    "rootDir": ".",
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "target": "es6",
    "module": "esnext",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "noImplicitAny": true,
    "jsx": "preserve",
    "plugins": [
      {
        "name": "typescript-eslint-language-service"
      },
      {
        "name": "typescript-styled-plugin"
      }
    ]
  },
  "exclude": ["node_modules", "**/node_modules/**", ".next", "dist"],
  "include": ["next-env.d.ts", ".eslintrc.js", "**/*.ts", "**/*.tsx", "**/*.d.ts"]
}

package.json

{
  "name": "www",
  "version": "0.1.0",
  "repository": "[email protected]:tsujp/jec.sh-www.git",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "importSort": {
    ".ts, .tsx": {
      "style": "eslint",
      "parser": "typescript"
    }
  },
  "dependencies": {
    "next": "9.4.4",
    "normalize.css": "^8.0.1",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-is": "^16.8",
    "styled-components": "^5.1.1"
  },
  "devDependencies": {
    "@arkweid/lefthook": "^0.7.2",
    "@commitlint/cli": "^9.0.1",
    "@commitlint/config-conventional": "^9.0.1",
    "@now/node": "^1.7.1",
    "@types/node": "14.0.18",
    "@types/react": "^16.9.41",
    "@types/styled-components": "5.1.1",
    "@typescript-eslint/eslint-plugin": "^3.6.0",
    "@typescript-eslint/parser": "3.6.0",
    "babel-plugin-styled-components": "^1.10.7",
    "eslint": "6.8.0",
    "import-sort-parser-typescript": "^6.0.0",
    "import-sort-style-eslint": "^6.0.0",
    "prettier-plugin-import-sort": "^0.0.4",
    "prettier-standard": "^16.3.0",
    "standard-version": "^8.0.0",
    "stylelint": "^13.6.1",
    "stylelint-config-recommended": "^3.0.0",
    "stylelint-config-styled-components": "^0.1.1",
    "stylelint-processor-styled-components": "^1.10.0",
    "typescript": "^3.9.6",
    "typescript-eslint-language-service": "^3.0.0",
    "typescript-styled-plugin": "^0.15.0"
  }
}

.prettierrc.js

module.exports = {
  trailingComma: 'all',
  endOfLine: 'lf',
  arrowParens: 'always',
}

.babelrc.js

/* STYLED COMPONENTS OPTIONS
 *
 *   PURE - really do remove dead-code, tell it there are no side-effects
 *   DISPLAYNAME - shows the semantic name in React Dev Tools
 *   FILENAME - prefixes class names with the semantic name
 *   MINIFY - self explanatory
 *   TRANSPILETEMPLATELITERALS - also minify template literals
 */

const trueInProd = process.env.NODE_ENV === 'production'

module.exports = {
  presets: ['next/babel'],
  plugins: [
    [
      'styled-components',
      {
        ssr: true,
        pure: trueInProd,
        displayName: !trueInProd,
        fileName: !trueInProd,
        minify: trueInProd,
        transpileTemplateLiterals: trueInProd,
      },
    ],
  ],
}

[tsujp]

This is likely due to this repo being for Javascript and not TypeScript isn't it? I also saw in the sources you're using babel-eslint which I believe straight up doesn't work for TypeScript as that requires @typescript-eslint/parser.

[sheerun]

These are only defaults, you override them with parser: '@typescript-eslint/parser'. If you mean that it doesn't show warning for no-explicit-any, it's probably because prettier-standard shows just errors, not warnings

[sheerun]

Also you still have eslint in package.json Prettier-standard includes it

[sheerun]

Also it seems import-sort-style-eslint imports eslint@^5.0.0 instead of 6.x

[tsujp]

I'll remove that from my package json now both eslint and the import sort style

[tsujp]

If you want did you have somewhere we could chat or do you prefer to keep it in the issue? My thinking is we could hash something out in a chat and post relevant findings back here.

[sheerun]

We can keep it here. It seems you are using both babel and typescript which is mixed codebase which has its own issues. You need to use .eslint.js overrides to support both: https://github.com/typescript-eslint/typescript-eslint/issues/109#issuecomment-536160947 Actually I might do it within prettier-standard itself

[tsujp]

The goal is for an .eslintrc.js as follows right? This does not detect the problem during linting either:

module.exports = {
  root: true,
  env: {
    es6: true,
    node: true,
    browser: true,
  },
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 2018,
    ecmaFeatures: { jsx: true },
    sourceType: 'module',
    project: './tsconfig.json',
    tsconfigRootDir: __dirname,
  },
  extends: ['plugin:@typescript-eslint/recommended'],
  plugins: ['@typescript-eslint/eslint-plugin'],
  overrides: [
    {
      parser: '@typescript-eslint/parser',
      parserOptions: {
        ecmaVersion: 2018,
        ecmaFeatures: { jsx: true },
        sourceType: 'module',
        project: './tsconfig.json',
        tsconfigRootDir: __dirname,
      },
      files: ['**/*.ts', '**/*.tsx'],
      settings: { react: { version: 'detect' } },
    },
  ],
  rules: {
  },
}

[tsujp]

If it helps here's the project (its just a hello world, doing this to get a base config setup which is proving extremely difficult) https://gitlab.com/tsujp/jec.sh-www

[sheerun]

ok I'll check your codebase

[tsujp]

@sheerun I tried to flesh out the overrides but again I see no effect, I made a branch with that config config-v4.

[sheerun]

Please try 16.4.1 and remove **/*.ts from .prettierignore

[tsujp]

@sheerun I figured this out, @typescript-eslint does not report typescript compiler errors only errors from it's own engine, by design. Unfortunately (but also sensibly) they do not include a check for no-implicit-any as you can instead just use tsc --noEmit to get that job done. Now onto getting prettier-standard to run import sorting... any ideas there?