Having issues getting ESLint + Typscript + Prettier working Serverless Stack #help

Join Slack

Having issues getting ESLint + Typscript + Prettie...

# help

Dan Van Brunt

09/09/2021, 6:21 PM

Having issues getting ESLint + Typscript + Prettier working with SST.

Parsing error: “parserOptions.project” has been set for @typescript-eslint/parser.

The file does not match your project config: .eslintrc.js.

The file must be included in at least one of the projects provided.

Ross Coundon

09/09/2021, 6:35 PM

Not at my computer just now but I think this is down to not having the lib directory included in the typescript inputs

Dan Van Brunt

09/09/2021, 6:40 PM

Thanks @Ross Coundon it was something like that…. just needed to use

.eslintrc.json

and not

.js

now ES isn’t trying to lint it

Frank

09/09/2021, 6:50 PM

Let me pull in @thdxr and see if he’s got any insight on this.

thdxr

09/09/2021, 6:52 PM

Can I see your eslint file?

thdxr

09/09/2021, 6:53 PM

I think the eslint is trying to lint itself

thdxr

09/09/2021, 6:54 PM

Ah I see you fixed it by swapping to .json. Another solution was to add

.eslintrc.js

in your .eslintignore

Camilo Bravo

09/09/2021, 9:55 PM

A continuation of this problem! We are now getting an error when running yarn start that the linter cannot find a

tsconfig.json

within our node modules directory. Not sure why it is even looking there? yarn start gives the following:

Copy code

Using stage: dev
Preparing your SST app
Detected tsconfig.json
Transpiling source
Linting source

/Users/me/Projects/my-app/lib/MyStack.ts
  0:0  error  Parsing error: Cannot read file '/users/me/projects/my-app/node_modules/@serverless-stack/cli/tsconfig.json'

/Users/me/Projects/my-app/lib/index.ts
  0:0  error  Parsing error: Cannot read file '/users/me/Projects/my-app/node_modules/@serverless-stack/cli/tsconfig.json'

✖ 2 problems (2 errors, 0 warnings)

Camilo Bravo

09/09/2021, 9:58 PM

@thdxr any idea why the linter would be looking for tsconfigs in node_module subdirectories?

Camilo Bravo

09/09/2021, 10:11 PM

could this be something about eslint ignore not being respected? it is my understanding that by default it should not go into node_modules directories

Camilo Bravo

09/09/2021, 10:19 PM

The eslint configuration:

Copy code

{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier",
    "plugin:prettier/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2019,
    "project": "./tsconfig.json",
    "sourceType": "module"
  },
  "rules": {
    "@typescript-eslint/no-floating-promises": [
      "error"
    ],
    "@typescript-eslint/no-unused-vars": [
      "warn",
      {
        "argsIgnorePattern": "^_"
      }
    ]
  }
}

thdxr

09/09/2021, 10:20 PM

can I see your tsconfig?

thdxr

09/09/2021, 10:20 PM

I don't use eslint so not super familiar with this setup but will try to think through it

Dan Van Brunt

09/09/2021, 11:56 PM

@thdxr this is our

tsconfig.json

file. I work with @Camilo Bravo

Dan Van Brunt

09/09/2021, 11:57 PM

@thdxr and this is our

.eslintrc.json

Dan Van Brunt

09/09/2021, 11:58 PM

@thdxr https://serverless-stack.slack.com/archives/C01JG3B20RY/p1631226033420100?thread_ts=1631211684.414300&cid=C01JG3B20RY Doesn’t SST use ESLint by default?

Dan Van Brunt

09/10/2021, 12:01 AM

https://serverless-stack.slack.com/archives/C01JG3B20RY/p1631225476419200?thread_ts=1631211684.414300&cid=C01JG3B20RY That or since our

.eslintrc.json

is referencing

./tsconfig

perhaps its being RUN by the default eslint inside SST cli resources which likely run inside node_modules and thus change what the root folder context is?

thdxr

09/10/2021, 12:02 AM

Yeah but I disable it because I haven't prioritized really learning how it works. I can try recreating your issue but will have to wait till tomorrow if that's ok

Dan Van Brunt

09/10/2021, 12:02 AM

Yup, just talking it out here while I have it in mind. Chat tomorrow.

Ross Coundon

09/10/2021, 6:46 AM

In case it's useful, here's our eslintrc.js

Ross Coundon

09/10/2021, 6:47 AM

and tsconfig.json

Dan Van Brunt

09/10/2021, 3:00 PM

Any thoughts? @Frank @thdxr

thdxr

09/10/2021, 3:14 PM

Will be looking at this in a few hours

Ross Coundon

09/10/2021, 3:23 PM

Pasted the wrong tsconfig.json This is what we use with SST

Copy code

{
  "compilerOptions": {
    "plugins": [
      {
        "transform": "ts-optchain/transform"
      }
    ],
    "typeRoots": [
      "./types",
      "./node_modules/@types"
    ],
    "resolveJsonModule": true,
    "target": "ES2019",
    "module": "commonjs",
    "allowJs": true,
    "checkJs": false,
    "sourceMap": true,
    "outDir": "./.build",
    "removeComments": false,
    "strict": true,
    "noImplicitAny": true,
    "esModuleInterop": true,
    "inlineSourceMap": false,
    "inlineSources": false,
    "skipLibCheck": true,
    "declarationMap": true,
    "declaration": true,
    "preserveConstEnums": true,
    "baseUrl": "src",
    "experimentalDecorators": true,
    "paths": {
      "@/*": [
        "main/*"
      ]
    }
  },
  "exclude": [
    "./jest.config.js",
    "./node_modules/**/*",
    "./build/**/*"
  ],
  "include": [
    "lib",
    "src"
  ]
}

Note it has lib (where sst is located) and src

Ross Coundon

09/10/2021, 3:23 PM

Then .eslintrc.js is

Copy code

module.exports = {
  root: true,
  parser: '@typescript-eslint/parser', // Specifies the ESLint parser
  extends: ['plugin:@typescript-eslint/recommended', 'plugin:@typescript-eslint/recommended-requiring-type-checking'],
  parserOptions: {
    ecmaVersion: 2019, // Allows for the parsing of modern ECMAScript features
    sourceType: 'module', // Allows for the use of imports,
    tsconfigRootDir: __dirname,
    project: './tsconfig.json',
    files: '*.ts',
  },
};

Ross Coundon

09/10/2021, 3:24 PM

This works for us in an SST project

Dan Van Brunt

09/10/2021, 3:25 PM

@Ross Coundon do you use prettier?

Ross Coundon

09/10/2021, 3:25 PM

Yes. .prettierrc.js looks like

Copy code

module.exports = {
  semi: true,
  trailingComma: 'all',
  singleQuote: true,
  printWidth: 130,
  tabWidth: 2,
};

Dan Van Brunt

09/10/2021, 3:25 PM

oh… and you DO have it working?

Dan Van Brunt

09/10/2021, 3:26 PM

let me see what could be the diff with our configs.

Ross Coundon

09/10/2021, 3:26 PM

yep

Dan Van Brunt

09/10/2021, 3:27 PM

I bet

tsconfigRootDir: __dirname,

is it.

Dan Van Brunt

09/10/2021, 3:31 PM

@Ross Coundon do you define a

.eslintignore

Dan Van Brunt

09/10/2021, 3:35 PM

@Ross Coundon looks like we’ve defined prettier in our

.eslintrc.js

Copy code

extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier',
    'plugin:prettier/recommended'
  ],

Dan Van Brunt

09/10/2021, 3:35 PM

and you have not

Dan Van Brunt

09/10/2021, 3:35 PM

reason for that?

Ross Coundon

09/10/2021, 3:37 PM

.eslintignore

Copy code

# don't ever lint node_modules
node_modules
# don't lint build output (make sure it's set to your correct build folder name)
build
# don't lint nyc coverage output
coverage
babel.config.js
jest.config.js
.eslintrc.js

Ross Coundon

09/10/2021, 3:39 PM

Just adding prettier into .eslintrc.js to see if it makes any difference

Dan Van Brunt

09/10/2021, 3:39 PM

@Ross Coundon BOOM! 💥 That did it. THANKS! I added a few things •

.eslintignore

•

eslintrc.js

tsconfigRootDir: __dirname,

I think it was that second one that did it.

Ross Coundon

09/10/2021, 3:40 PM

excellent

Dan Van Brunt

09/10/2021, 3:40 PM

super happy got this working, thanks for the answer

Ross Coundon

09/10/2021, 3:40 PM

no worries, glad it's sorted

thdxr

09/10/2021, 3:40 PM

now I don't have to do any work!

4 Views

Open in Slack

Previous Next