Introduction
In this article, a WEB application will be created using the latest version ofAngular and added theESLint which analyzes the code statically to find problems with the JavaScript code.
Prerequisites
Before you start, you need to install and configure the tools below to create the Angular application.
- git: Git is a distributed version control system and it will be used to sync the repository.
- Node.js and npm: Node.js is a JavaScript code runtime software based on Google's V8 engine. npm is a package manager for Node.js (Node.js Package Manager). They will be used to build and run the Angular application and install the libraries.
- Angular CLI: Angular CLI is a command line utility tool for Angular and it will be used to create the base structure of the Angular application.
- IDE (e.g.Visual Studio Code orWebStorm): IDE (Integrated Development Environment) is a tool with a graphical interface to help in the development of applications and it will be used to develop the Angular application.
Getting started
Create the Angular application
Angular is a development platform for building WEB, mobile and desktop applications using HTML, CSS and TypeScript (JavaScript). Currently, Angular is at version 14 and Google is the main maintainer of the project.
1. Let's create the application with the Angular base structure using the@angular/cli with the route file and the SCSS style format.
ng new angular-eslint--routingtrue--style scssCREATE angular-eslint/README.md(1067 bytes)CREATE angular-eslint/.editorconfig(274 bytes)CREATE angular-eslint/.gitignore(548 bytes)CREATE angular-eslint/angular.json(3136 bytes)CREATE angular-eslint/package.json(1045 bytes)CREATE angular-eslint/tsconfig.json(863 bytes)CREATE angular-eslint/.browserslistrc(600 bytes)CREATE angular-eslint/karma.conf.js(1431 bytes)CREATE angular-eslint/tsconfig.app.json(287 bytes)CREATE angular-eslint/tsconfig.spec.json(333 bytes)CREATE angular-eslint/.vscode/extensions.json(130 bytes)CREATE angular-eslint/.vscode/launch.json(474 bytes)CREATE angular-eslint/.vscode/tasks.json(938 bytes)CREATE angular-eslint/src/favicon.ico(948 bytes)CREATE angular-eslint/src/index.html(299 bytes)CREATE angular-eslint/src/main.ts(372 bytes)CREATE angular-eslint/src/polyfills.ts(2338 bytes)CREATE angular-eslint/src/styles.scss(80 bytes)CREATE angular-eslint/src/test.ts(749 bytes)CREATE angular-eslint/src/assets/.gitkeep(0 bytes)CREATE angular-eslint/src/environments/environment.prod.ts(51 bytes)CREATE angular-eslint/src/environments/environment.ts(658 bytes)CREATE angular-eslint/src/app/app-routing.module.ts(245 bytes)CREATE angular-eslint/src/app/app.module.ts(393 bytes)CREATE angular-eslint/src/app/app.component.scss(0 bytes)CREATE angular-eslint/src/app/app.component.html(23364 bytes)CREATE angular-eslint/src/app/app.component.spec.ts(1097 bytes)CREATE angular-eslint/src/app/app.component.ts(219 bytes)✔ Packages installed successfully. Successfully initialized git.2. Now we will install the libraries and add the ESLint settings.
ng add @angular-eslint/schematicsℹ Using package manager: npm✔ Found compatible package version: @angular-eslint/schematics@14.2.5.✔ Package information loaded.The package @angular-eslint/schematics@14.2.5 will be installed and executed.Would you like to proceed? Yes✔ Packages successfully installed. All @angular-eslint dependencies have been successfully installed 🎉 Please see https://github.com/angular-eslint/angular-eslintforhow to add ESLint configuration to your project. We detected that you have a single projectinyour workspace and no existing linter wired up, so we are configuring ESLintforyou automatically. Please see https://github.com/angular-eslint/angular-eslintformore information.CREATE .eslintrc.json(984 bytes)UPDATE package.json(1511 bytes)UPDATE angular.json(3447 bytes)✔ Packages installed successfully.3. Next, we will run the command below to validate the ESLint installation and configuration.
npm run lint> angular-eslint@1.0.0 lint /home/rodrigokamada/angular-eslint> ng lintLinting"angular-eslint"...All files pass linting.4. Ready! The messageAll files pass linting. shows that no problem was found.
The application repository is available athttps://github.com/rodrigokamada/angular-eslint.
Conclusion
In summary, the following topics were covered in this article:
- We created an Angular application.
- We added the ESLint to analize and find problems with the code.
You can use this article to analize and find problems with your application code before deploying to your environment.
Thank you for reading and I hope you enjoyed the article!
This tutorial was posted on myblog in portuguese.
To stay updated whenever I post new articles, follow me onTwitter andLinkedIn.
Top comments(0)
For further actions, you may consider blocking this person and/orreporting abuse
