#56 Implement Prettier

Author: jorgecod

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "printWidth": 120,
+  "singleQuote": true,
+  "useTabs": false,
+  "tabWidth": 2,
+  "semi": true,
+  "bracketSpacing": true,
+  "endOfLine": "lf"
+}

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`.

package-lock.json

@@ -45,14 +45,16 @@
     "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",
     "typescript": "~3.7.5"
   },
   "husky": {
     "hooks": {
-      "commit-msg": "commit-message-validator"
+      "commit-msg": "commit-message-validator",
+      "pre-commit": "ng lint"
     }
   },
   "config": {

package.json

@@ -4,14 +4,12 @@
     [projectToEdit]="project"
     (savedProject)="updateProject($event)"
     (cancelForm)="cancelForm()"
-  >
-  </app-create-project>
+  ></app-create-project>
 
   <app-project-list
     class="item"
     [projects]="projects"
     (editProject)="editProject($event)"
     (deleteProject)="deleteProject($event)"
-  >
-  </app-project-list>
+  ></app-project-list>
 </div>

src/app/modules/project-management/pages/project-management.component.html

@@ -5,33 +5,35 @@ 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();
   }
 
   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;
     });
   }

src/app/modules/project-management/pages/project-management.component.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;
 }
-