From b9f65168f43fa6aaabf7beec700b275946ab76b6 Mon Sep 17 00:00:00 2001 From: Jorge Flores Date: Mon, 30 Mar 2020 18:02:45 -0500 Subject: [PATCH] #56 Implement Prettier --- .prettierrc | 9 +++++++++ README.md | 10 ++++++++++ package-lock.json | 6 ++++++ package.json | 4 +++- .../pages/project-management.component.html | 6 ++---- .../pages/project-management.component.ts | 20 ++++++++++--------- src/app/modules/shared/models/entry.model.ts | 17 ++++++++-------- 7 files changed, 49 insertions(+), 23 deletions(-) create mode 100644 .prettierrc diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 000000000..ecda2b898 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,9 @@ +{ + "printWidth": 120, + "singleQuote": true, + "useTabs": false, + "tabWidth": 2, + "semi": true, + "bracketSpacing": true, + "endOfLine": "lf" +} diff --git a/README.md b/README.md index ada02a6a2..0bc8a1a49 100644 --- a/README.md +++ b/README.md @@ -9,6 +9,7 @@ This project was generated using [Angular CLI](https://github.com/angular/angula Install Node.js from [https://nodejs.org/en/download/] but we recommend that you install it using Node Version Management [https://github.com/nvm-sh/nvm] (v12.16.1 LTS). ### Angular CLI + Angular CLI is a Command Line Interface (CLI) to speed up your development with Angular. Run `npm install -g @angular/cli` to install Angular CLI @@ -22,6 +23,15 @@ Run `npm install` to install the required node_modules for this project. Run `ng serve` to run the app in dev mode. After executing this command, you can navigate to `http://localhost:4200/` to see the app working. The app will automatically reload if you change anything in the source files. +## Prepare your environment for vscode + +Install the following extensions: + +- `EditorConfig for Visual Studio Code`. +- `TSLint` +- `Prettier - Code formatter`. +- Go to user settings (`settings.json`) and enable formatting on save: `"editor.formatOnSave": true`. + ## Code scaffolding Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. diff --git a/package-lock.json b/package-lock.json index 625b873b9..2ed368ccd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8868,6 +8868,12 @@ "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=", "dev": true }, + "prettier": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.0.2.tgz", + "integrity": "sha512-5xJQIPT8BraI7ZnaDwSbu5zLrB6vvi8hVV58yHQ+QK64qrY40dULy0HSRlQ2/2IdzeBpjhDkqdcFBnFeDEMVdg==", + "dev": true + }, "private": { "version": "0.1.8", "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz", diff --git a/package.json b/package.json index c649af184..a8c270fb5 100644 --- a/package.json +++ b/package.json @@ -45,6 +45,7 @@ "karma-coverage-istanbul-reporter": "~2.1.0", "karma-jasmine": "~2.0.1", "karma-jasmine-html-reporter": "^1.4.2", + "prettier": "^2.0.2", "protractor": "~5.4.3", "ts-node": "~8.3.0", "tslint": "~5.18.0", @@ -52,7 +53,8 @@ }, "husky": { "hooks": { - "commit-msg": "commit-message-validator" + "commit-msg": "commit-message-validator", + "pre-commit": "ng lint" } }, "config": { diff --git a/src/app/modules/project-management/pages/project-management.component.html b/src/app/modules/project-management/pages/project-management.component.html index 5ad9c163f..540d88b70 100644 --- a/src/app/modules/project-management/pages/project-management.component.html +++ b/src/app/modules/project-management/pages/project-management.component.html @@ -4,14 +4,12 @@ [projectToEdit]="project" (savedProject)="updateProject($event)" (cancelForm)="cancelForm()" - > - + > - + > diff --git a/src/app/modules/project-management/pages/project-management.component.ts b/src/app/modules/project-management/pages/project-management.component.ts index 600ddffc8..177b2e189 100644 --- a/src/app/modules/project-management/pages/project-management.component.ts +++ b/src/app/modules/project-management/pages/project-management.component.ts @@ -5,18 +5,16 @@ import { ProjectService } from '../services/project.service'; @Component({ selector: 'app-project-management', templateUrl: './project-management.component.html', - styleUrls: ['./project-management.component.scss'] + styleUrls: ['./project-management.component.scss'], }) export class ProjectManagementComponent implements OnInit { - editedProjectId; project: Project; projects: Project[] = []; - constructor(private projectService: ProjectService) { - } + constructor(private projectService: ProjectService) {} ngOnInit(): void { this.getProjects(); @@ -24,14 +22,18 @@ export class ProjectManagementComponent implements OnInit { updateProject(projectData): void { if (this.editedProjectId) { - const projectIndex = this.projects.findIndex((project => project.id === this.editedProjectId)); + const projectIndex = this.projects.findIndex((project) => project.id === this.editedProjectId); this.projects[projectIndex].name = projectData.name; this.projects[projectIndex].details = projectData.details; this.projects[projectIndex].status = projectData.status; this.projects[projectIndex].completed = projectData.completed; } else { - const newProject: Project = { id: (this.projects.length + 1).toString(), name: projectData.name, - details: projectData.details, status: projectData.status, completed: false + const newProject: Project = { + id: (this.projects.length + 1).toString(), + name: projectData.name, + details: projectData.details, + status: projectData.status, + completed: false, }; this.projects = this.projects.concat(newProject); } @@ -50,8 +52,8 @@ export class ProjectManagementComponent implements OnInit { this.project = null; } - getProjects() { - this.projectService.getProjects().subscribe(data => { + getProjects() { + this.projectService.getProjects().subscribe((data) => { this.projects = data; }); } diff --git a/src/app/modules/shared/models/entry.model.ts b/src/app/modules/shared/models/entry.model.ts index 62904c0b3..a52f04c15 100644 --- a/src/app/modules/shared/models/entry.model.ts +++ b/src/app/modules/shared/models/entry.model.ts @@ -1,11 +1,10 @@ export interface Entry { - id: string, - project: string, - startDate: string, - endDate: string, - activity: string, - technology: string, - comments?: string, - ticket?: string + id: string; + project: string; + startDate: string; + endDate: string; + activity: string; + technology: string; + comments?: string; + ticket?: string; } -