Dotfiles – .editorconfig, .gitignore, and .angular-cli.json

Dotfiles are the configuration files that start with a dot; they are always in the background of the project, but they are very important. They are used to customize your system. The name dotfiles is derived from the configuration files in Unix-like systems. In an Angular project, we will see three of these files:

• .editorconfig: This file configures the text editor to use a particular style of code, so that the project is consistent, even though it is being edited by several people and in several types of text editors.
• .gitignore: As the name suggests, it ignores determined folders and files, so that they are not tracked by source control. We often find node_modules and a dist folder that do not require version control, because they are generated every time we install the application or run build commands.
• .angular-cli.json: Stores the project settings and is constantly used when executing build or server commands. There can be several Angular applications in a single project. Let's look at some details and inspect .angular-cli.json:

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "project": {
    "name": "chapter03"
    },
    // Here we determinate the projects, for this example we have     only one app.
    "apps": [
    {
    "root": "src",
    "outDir": "dist",
    "assets": [
    "assets",
    "favicon.ico"
    ],
    "index": "index.html",
    "main": "main.ts",
    "polyfills": "polyfills.ts",
    "test": "test.ts",
    "tsconfig": "tsconfig.app.json",
    "testTsconfig": "tsconfig.spec.json",
    "prefix": "app",
    "styles": [
    "styles.css"
    ],
    "scripts": [],
    "environmentSource": "environments/environment.ts",
    // Configuration for both environment, developing and production
    "environments": {
    "dev": "environments/environment.ts",
    "prod": "environments/environment.prod.ts"
    }
    }
    ],
    // Configuration for end to end tests and unit tests
    "e2e": {
    "protractor": {
    "config": "./protractor.conf.js"
    }
    },
    "lint": [
    {
    "project": "src/tsconfig.app.json",
    "exclude": "**/node_modules/**"
    },
    {
    "project": "src/tsconfig.spec.json",
    "exclude": "**/node_modules/**"
    },
    {
    "project": "e2e/tsconfig.e2e.json",
    "exclude": "**/node_modules/**"
    }
    ],
    "test": {
    "karma": {
    "config": "./karma.conf.js"
    }
    },
    // Stylesheet configiration, for this example we are using CSS
    "defaults": {
    "styleExt": "css",
    "component": {}
    }
}