@josundt/prettier-config

Standard configuration for Prettier code-style formatter

Usage

Make sure your project has an .editorconfig file, defining indent_width, indent_style etc. since prettier will use some of these settings to format source code accordingly.

Install this package as a dev dependency

npm install -D -E @josundt/prettier-config

Create a .prettierrc file in the root directory of your project with the following content:
```
"@josundt/prettier-config"
```

Add the following formatting scripts to your project's package.json file:

{
    // ...
    "scripts": {
        // ...
        "format": "npm run format:html && npm run format:style && npm run format:ts",
        "format:ts": "prettier --config .prettierrc src/**/*.ts test/**/*.ts --write",
        "format:style": "prettier --config .prettierrc src/**/*.{css,scss} --write",
        "format:html": "prettier --config .prettierrc src/**/*.{html,ejs} --write",
        // ...
    }
    // ...
}

Test the script:
```
npm run format
```
Review all changes and commit.

VS Code integration: a. Install Prettier extension (esbenp.prettier-vscode). b. Add the extension to the projects's recommended extensions in the project's .vscode/extensions.json file. c. Configure the extension's behavior in .vscode/settings.json:

{
    // ...
    "[css]": {
        // ...
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnPaste": true,
        "editor.formatOnSave": true
    },
    "[scss]": {
        // ...
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnPaste": true,
        "editor.formatOnSave": true
    },
    "[html]": {
        // ...
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnPaste": true,
        "editor.formatOnSave": true
    },
    "[javascript]": {
        // ...
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnPaste": true,
        "editor.formatOnSave": true
    },
    "[json]": {
        // ...
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnPaste": true,
        "editor.formatOnSave": true
    },
    "[jsonc]": {
        // ...
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnPaste": true,
        "editor.formatOnSave": true
    },
    "[typescript]": {
        // ...
        "editor.formatOnPaste": true,
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
    // ...
}

d. Test that files with the extensions in the list above are auto-formatted on save and paste.

josundt/josundt-prettier-config

@josundt/prettier-config

Usage