@yikoyu/eslint-config-prettier NPM

@yikoyu/eslint-config-prettier

This package provides Prettier and ESLint settings as an shareable configuration.

Installation

Install the package with:

pnpm add eslint stylelint @yikoyu/eslint-config-prettier -D
# or
yarn add eslint stylelint @yikoyu/eslint-config-prettier -D
# or
npm i eslint stylelint @yikoyu/eslint-config-prettier -D

Find out and install peerDependencies.

pnpm info "@yikoyu/eslint-config-prettier@latest" peerDependencies

Entry points

@yikoyu/eslint-config-prettier/base
@yikoyu/eslint-config-prettier/typescript
@yikoyu/eslint-config-prettier/vue2
@yikoyu/eslint-config-prettier/vue3
@yikoyu/eslint-config-prettier/prettier.config
@yikoyu/eslint-config-prettier/stylelint.config

Usage

If you did not already have .eslint.js prettier.config.js and stylelint.config.js configuration files in the root of your project create them.

Add the following to your .eslint.js:

// .eslint.js
module.exports = {
  extends: [
    // ... other configs

    // Make sure to put prettier last, so it gets the chance to override other configs.
    '@yikoyu/eslint-config-prettier/base',

    // Using vue3 and typescript config
    '@yikoyu/eslint-config-prettier/typescript',
    '@yikoyu/eslint-config-prettier/vue3',
  ],
};

Add the following to your prettier.config.js:

// prettier.config.js
module.exports = require('@yikoyu/eslint-config-prettier/prettier.config');

Add the following to your stylelint.config.js:

// stylelint.config.js
module.exports = require('@yikoyu/eslint-config-prettier/stylelint.config');

NPM script

Add the following script to your package.json for easy usage:

"scripts": {
  "lint:css": "stylelint **/*.{css,less,scss,vue}",
  "lint:js": "eslint **/*.{js,ts,tsx,vue}",
  "lint:all": "eslint **/*.{js,ts,tsx,vue} & stylelint **/*.{css,less,scss,vue}",
  "lint:fix": "eslint **/*.{js,ts,tsx,vue} --fix & stylelint **/*.{css,less,scss,vue} --fix",
}

Vite

Install the package with:

pnpm add vite-plugin-checker -D

Add plugin to Vite config file and config the checker you need.

// vite.config.ts
import checker from 'vite-plugin-checker'

import { scripts } from './package.json'

export default {
  plugins: [
    checker({
      vueTsc: true,
      eslint: {
        lintCommand: scripts['lint:js']
      },
      stylelint: {
        lintCommand: scripts['lint:css']
      }
    })
  ],
}

VS Code

Install the following plugins in VS Code

// .vscode/extensions.json
{
  "recommendations": [
    "stylelint.vscode-stylelint",
    "dbaeumer.vscode-eslint"
  ]
}

Add the following to your .vscode/settings.json

// .vscode/settings.json
{
  "stylelint.validate": ["css", "less", "postcss", "scss", "vue", "sass"],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  }
}

Recommendation

Add the following config files to the root of your project:

# .editorconfig: http://EditorConfig.org
root = true

[*]
charset=utf-8
end_of_line=lf
insert_final_newline=false
indent_style=space
indent_size=2

[{*.ng,*.sht,*.html,*.shtm,*.shtml,*.htm}]
indent_style=space
indent_size=2

[{*.jhm,*.xslt,*.xul,*.rng,*.xsl,*.xsd,*.ant,*.tld,*.fxml,*.jrxml,*.xml,*.jnlp,*.wsdl}]
indent_style=space
indent_size=2

[{.babelrc,.stylelintrc,.eslintrc,.prettierrc,*.json,*.jsb3,*.jsb2,*.bowerrc}]
indent_style=space
indent_size=2

[*.svg]
indent_style=space
indent_size=2

[*.js.map]
indent_style=space
indent_size=2

[*.less]
indent_style=space
indent_size=2

[*.vue]
indent_style=space
indent_size=2

[{.analysis_options,*.yml,*.yaml}]
indent_style=space
indent_size=2

LICENSE

MIT