DEV Community

Using ESLint and Prettier with VScode in an Angular Project 🚀(outdated)

Andrei Voicu on March 21, 2020

In this setup guide you will learn how to use Prettier to take care of your code formatting and ESLint to take care of your code style in an Angula...

Read full post

snutij • Jul 1 '20 • Edited

Hi dude, thanks you for pro tips !
But with ng new command it will create karma.conf.js and protractor.conf.js that are not compatible with somes eslint rules like no-empty-function or no-var-require. I must add them to eslintignore.

Except this, everything is fine. :)

Tony Stevanovich • Mar 26 '20

I've been looking for a guide like this. Thank you for putting this together.
Only things I changed from your article was
1: the addition of a .prettierignore file to format package.json, package-lock.json or the dist folder.
2: I added "trailingComma": "none" to the .prettierrc.json file.
3: I really don't like how prettier formats HTML files, so I changed up settings.json with this:
"[html]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "vscode.html-language-features"
},

Andrei Voicu • Mar 27 '20

I'm glad you found it useful :D

CptDayDreamer • Oct 13 '20 • Edited

How to configure specific rules? If I add "no-empty-function": "off" to .eslintrc.json it won't be recognized. I still get the warning in my code. Where to set it then or why does it not work? Nice tutorial anyway but that's a problem for me. The warning in the code is: Unexpected empty method 'ngOnInit'.eslint@typescript-eslint/no-empty-function

Jared Chapiewsky • Nov 16 '21

I had the same problem! To resolve, I actually had to add "@typescript-eslint/no-empty-function": "off" to the .eslintrc.json file. The "@typescript-eslint/" was the important missing bit. You probably figured this out ages ago but wanted to add it here in case anyone else has this same problem.

Aliaksandr Lahinouski • Aug 26 '22

Thank you Jared! Thank you so so much. Love you man.

David Velásquez • Sep 7 '20 • Edited

Hi, there seems to be a problem with your instructions.

npm run lint
> tsc --noEmit && eslint . --ext js,ts,json --quiet --fix

Version 4.0.2
Syntax:   tsc [options] [file...]

Examples: tsc hello.ts
          tsc --outFile file.js file.ts
          tsc @args.txt
          tsc --build tsconfig.json

Options:
 -h, --help                                         Print this message.
 -w, --watch                                        Watch input files.
 --pretty                                           Stylize errors and messages using color and context (experimental).
 --all                                              Show all compiler options.
 -v, --version                                      Print the compiler's version.
 --init                                             Initializes a TypeScript project and creates a tsconfig.json file.
 -p FILE OR DIRECTORY, --project FILE OR DIRECTORY  Compile the project given the path to its configuration file, or to a folder with a 'tsconfig.json'.
 -b, --build                                        Build one or more projects and their dependencies, if out of date
 -t VERSION, --target VERSION                       Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'.
 -m KIND, --module KIND                             Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'.
 --lib                                              Specify library files to be included in the compilation.
                                                      'es5' 'es6' 'es2015' 'es7' 'es2016' 'es2017' 'es2018' 'es2019' 'es2020' 'esnext' 'dom' 'dom.iterable' 'webworker' 'webworker.importscripts' 'scripthost' 'es2015.core' 'es2015.collection' 'es2015.generator' 'es2015.iterable' 'es2015.promise' 'es2015.proxy' 'es2015.reflect' 'es2015.symbol' 'es2015.symbol.wellknown' 'es2016.array.include' 'es2017.object' 'es2017.sharedmemory' 'es2017.string' 'es2017.intl' 'es2017.typedarrays' 'es2018.asyncgenerator' 'es2018.asynciterable' 'es2018.intl' 'es2018.promise' 'es2018.regexp' 'es2019.array' 'es2019.object' 'es2019.string' 'es2019.symbol' 'es2020.bigint' 'es2020.promise' 'es2020.string' 'es2020.symbol.wellknown' 'es2020.intl' 'esnext.array' 'esnext.symbol' 'esnext.asynciterable' 'esnext.intl' 'esnext.bigint' 'esnext.string' 'esnext.promise' 
 --allowJs                                          Allow javascript files to be compiled.
 --jsx KIND                                         Specify JSX code generation: 'preserve', 'react-native', or 'react'.
 -d, --declaration                                  Generates corresponding '.d.ts' file.
 --declarationMap                                   Generates a sourcemap for each corresponding '.d.ts' file.
 --sourceMap                                        Generates corresponding '.map' file.
 --outFile FILE                                     Concatenate and emit output to single file.
 --outDir DIRECTORY                                 Redirect output structure to the directory.
 --removeComments                                   Do not emit comments to output.
 --noEmit                                           Do not emit outputs.
 --strict                                           Enable all strict type-checking options.
 --noImplicitAny                                    Raise error on expressions and declarations with an implied 'any' type.
 --strictNullChecks                                 Enable strict null checks.
 --strictFunctionTypes                              Enable strict checking of function types.
 --strictBindCallApply                              Enable strict 'bind', 'call', and 'apply' methods on functions.
 --strictPropertyInitialization                     Enable strict checking of property initialization in classes.
 --noImplicitThis                                   Raise error on 'this' expressions with an implied 'any' type.
 --alwaysStrict                                     Parse in strict mode and emit "use strict" for each source file.
 --noUnusedLocals                                   Report errors on unused locals.
 --noUnusedParameters                               Report errors on unused parameters.
 --noImplicitReturns                                Report error when not all code paths in function return a value.
 --noFallthroughCasesInSwitch                       Report errors for fallthrough cases in switch statement.
 --types                                            Type declaration files to be included in compilation.
 --esModuleInterop                                  Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'.
 @<file>                                            Insert command line options and files from a file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! newproject@0.93.0 lint: `tsc --noEmit && eslint . --ext js,ts,json --quiet --fix`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the newproject@0.93.0 lint script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/newprojectowner/.npm/_logs/2020-09-07T14_41_11_595Z-debug.log

Viltersten • Jan 11 '21

It would be nice to get links for all the features assignable in Prettier and in EsLint. Especially the former, as the latter can be googled easier.

Also, I'm not sure how they relate to each other. What if I set the first to allow quotation marks and the other to only accept apostrophes? Kind of confusing at the moment.

Seth Karim Luis Martinez • Jul 9 '20 • Edited

It does not work or I have not been able to make it work with the html files.

In my example I added a component called test and it made errors executing the lint.

As I read in the Prettier documentation, the --fix parameter should automatically correct html as well.

drive.google.com/file/d/1GHIMYOMu6...

Himanshu Goel • Jun 2 '20

When I setup these details and tried to run npm run lint, I receive below error -
No files matching the pattern "*/.{ts}" were found.

Andrei Voicu • Jun 3 '20 • Edited

I will update the article, just to have time for it, things have changed, new version of eslint and prettier got out :D

Edit: Updated the article 😉

pedy711 • Feb 23 '21

Hi Andrei, Thanks for your article. But I get the following error:
ESLint couldn't find the config "prettier/@typescript-eslint" to extend from. Please check that the name of the config is correct.