sheerun / prettier-standard

Formats with Prettier and lints with ESLint+Standard! (✿◠‿◠)
MIT License
870 stars 44 forks source link

not catching no-implicit-any #105

Open tsujp opened 4 years ago

tsujp commented 4 years ago

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 commented 4 years ago

Could you share your setup?

tsujp commented 4 years ago

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": "git@gitlab.com: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 commented 4 years ago

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

sheerun commented 4 years ago

Also currently prettier-standard requires eslint 6.x

tsujp commented 4 years ago

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

sheerun commented 4 years ago

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

On Wed, 8 Jul 2020 at 04:24, Jordan notifications@github.com 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 commented 4 years ago

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 commented 4 years ago

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

tsujp commented 4 years ago

@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 ```javascript 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 ```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 ```json { "name": "www", "version": "0.1.0", "repository": "git@gitlab.com: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 ```javascript module.exports = { trailingComma: 'all', endOfLine: 'lf', arrowParens: 'always', } ```
.babelrc.js ```javascript /* 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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

sheerun commented 4 years ago

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

tsujp commented 4 years ago

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

tsujp commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

ok I'll check your codebase

tsujp commented 4 years ago

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

sheerun commented 4 years ago

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

tsujp commented 4 years ago

@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?