To be honest, I was so overly dependent on all kinds of boilerplates that I haven't got a systematic knowledge of configurations like package.json, .eslintrc.js, etc. Which makes me confused when something didn't work as I expected and it would cost me much time to figure out why it didn't work. So I decided to work on setting up a frontend project envrionment step by step to learn the details of tools used. Here I'm going to talk about ESLint and Prettier.

ESLint Data Flow and Several Concepts

+-------------+  (Text)   +---------------+   (AST)    +--------------+
| Source Code | --------> | ESLint Parser | ---------> | ESLint Rules | ----> (Errors)
+-------------+           +---------------+            +--------------+
  • Parser: Parse source code text, convert it to an AST, popular parsers are:
  • Processor: Extract JavaScript code from another kind of files.
  • Environments: An environment defines global variables that are predefined. For example:
    • browser: browser global variables.
    • node: Node.js global variables.
  • Rule: For validating the AST, some are for formatting, some are for checking code quality which may report potential bugs.
  • Plugin: Third-party plugins named as eslint-plugin-xxx, it can contain all kinds of components working in an ESLint workflow, e.g. rules, environments, configs, processors, etc. more
  • ...

I'm not to list all the concepts, please read Configuring ESLint.

eslint-config-xxx vs. eslint-plugin-xxx

  • eslint-config-xxx: A shareable eslint configuration, which is an npm package that exports a configuration object.
  • eslint-plugin-xxx: We can define rules, environments, configs and implement processors in an ESLint plugin. It's completely functional, thus more powerful.

Usecase: eslint-config-standard

eslint-config-standard configs for JavaScript Standard Style.

Firstly, add eslint-config-standard to dev dependencies and install it:

yarn add --dev eslint-config-standard

In eslint-config-standard's configuration object, it requires plugins:

// See: https://github.com/standard/eslint-config-standard/blob/master/eslintrc.json

"plugins": [
    "import",
    "node",
    "promise",
    "standard"
]

So you have to install these plugins too:

yarn add --dev eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node

Secondly, update .eslintrc.js:

module.exports = {
  plugins: [ 'standard' ],  // use eslint-plugin-standard
  extends: [ 'standard' ]  // extends the configuration: eslint-config-standard
}

Usecase: eslint-plugin-vue

eslint-plugin-vue configs for Vue.js, which will let ESLint check .vue files.

Firstly install the plugin:

yarn add --dev eslint-plugin-vue

Secondly, update .eslintrc.js:

module.exports = {
  plugins: [ 'vue' ],  // use eslint-plugin-vue
  extends: [ 'plugin:vue/recommended' ]  // extends the configuration file exported from eslint-plugin-vue
}

Configure ESLint for Babel

I'm using babel. So I need a babel parser to parse JavaScript code written in Babel syntax. It is Babel ESlint.

Install it and let ESLint use this parser instead of its default parser. At the same time, we also install eslint-plugin-babel as it is a plugin companion to babel-eslint:

yarn add --dev babel-eslint eslint-plugin-babel
module.exports = {
  parserOptions: {
    parser: 'babel-eslint'  // specify the parser
  },
  plugins: [ 'babel' ]
}

Configure ESLint for React, Vue, Angular...

Find plugins working on these frameworks. As long as you know how ESLint works, I think it's very easy to configure these frameworks by yourself.

Prettier

Prettier is an opinionated code formatter.

Yes, prettier is just a formatter. While ESLint works on both formatting and code quality checking. If you are sick of selecting what formatting rules aka. coding style to use, I recommend you to use prettier. Just leave everything about formatting to prettier and let linters (e.g. eslint) forcus on code quality checking.

Read: How does prettier compare to ESLint/TSLint/stylelint, etc.?

Configure prettier for ESLint

yarn add --dev eslint-plugin-prettier eslint-config-prettier
module.exports = {
  parserOptions: {
    parser: 'babel-eslint'
  },
  plugins: ['babel', 'standard', 'vue', 'prettier'],
  extends: [
    'standard',
    'plugin:vue/recommended',
    'prettier',       // use prettier rules
    'prettier/babel',   // turn off rules of babel
    'prettier/standard',  // turn off rules of standard
    'prettier/vue'    // turn off rules of vue
  ]
}

Integrate ESLint and Prettier with VSCode

Install ESLint and Prettier for your vscode and format your code on save.