prettier-config

Installation

This package provides Skagerak Energi's shared Prettier configuration for consistent code formatting across projects. It includes opinionated settings for JavaScript, TypeScript, Vue.js, and other supported file types.

The configuration includes settings optimized for Vue.js development with proper indentation for script and style blocks, and formatting rules that complement our ESLint configuration.

Install the package with:

npm install --dev @skagerakenergi/prettier-config

Usage

Add the config to your prettier.config.ts file:

import prettierConfig from '@skagerakenergi/prettier-config';

export default { ...prettierConfig };

Or for JavaScript projects, use prettier.config.js:

import prettierConfig from '@skagerakenergi/prettier-config';

export default { ...prettierConfig };

You can also reference it in your package.json:

{
  "prettier": "@skagerakenergi/prettier-config"
}

Configuration Details

This configuration includes the following settings:

• No trailing commas - Cleaner diffs and less noise
• No semicolons - Modern JavaScript style
• Single quotes - Consistent with ESLint configuration
• 100 character line width - Optimal for modern screens
• 2-space indentation - Consistent with Vue.js conventions
• Bracket spacing - { foo: bar } instead of {foo: bar}
• Vue script and style indentation - Proper indentation for Vue SFC blocks

Assumptions

This Prettier configuration comes with some fundamental assumptions:

• Modern JavaScript/TypeScript development
• Vue.js 3 projects
• ESM modules
• Integration with @skagerakenergi/eslint-config-vue3-ts

Extending the Configuration

You can extend or override the configuration in your project:

// prettier.config.ts
import prettierConfig from '@skagerakenergi/prettier-config';

export default {
  ...prettierConfig,
  // Your custom overrides
  printWidth: 120,
  semi: true
}

Use with ESLint

This configuration is designed to work seamlessly with @skagerakenergi/eslint-config-vue3-ts, which includes @vue/eslint-config-prettier to disable conflicting ESLint formatting rules.