Beautify Vue code with ESLint & Prettier

Prettier is a knowledgeable code formatting tool. It enforces a consistent style by parsing the code and reprinting it using its own rules, taking into account maximum lines, and wrapping the code when necessary. Today, it is the preferred solution for all code formatting problems; Supports JavaScript, Flow, TypeScript, CSS, SCSS, Less, JSX, Vue, GraphQL, JSON, Markdown, etc. You can combine ESLint with Prettier, While detecting potential problems in your code, you can also unify your team’s code style, which can lead to high quality code that increases productivity.

beautify-vue-by-eslint-and-prettier

Initialize the Vue project recommendation

Prettier does overlap with ESLint in formatting code, but the emphasis is different: ESLint mainly checks code for quality and hints, and can provide very little formatting. Prettier has an even greater advantage in formatting code. Prettier is designed to integrate easily with ESLint, so you can easily have both in a project without worrying about conflicts. Here’s how to format and Prettier Vue code using ESLint & Prettier. If you use other types of frameworks, much of this experience still applies.

As advocated in the out-of-the-box Vue Webpack scaffolding template: VUE-CLI3 in this release, it integrates more rich features, as well as more default configurations, to create, develop and manage projects through the included GRAPHICAL user interface… The RC version has been released, the core functions are ready and the API is stable, so it is recommended to use VUE-CLI3 to create your project; Simply run the vue create my-project command and follow the prompts to select; ESlint is a necessary option for your project to continue happily. If you do, you can find the ESLint configuration under the eslintConfig property in package.json; Next, just integrate Prettier with ESLint.

Integrate ESLint & Prettier

"eslintConfig": {
    "root": true,
    "extends": [
      "plugin:vue/essential",
      "plugin:prettier/recommended",
      "eslint:recommended"
    ]
  },
Copy the code

yarn add --dev eslint-plugin-prettier eslint-config-prettier prettier-eslint-cli
Copy the code

{
  "scripts": {
    "eslint-fix": "eslint src/**/**/*.vue --fix",
    "format-code": "prettier-eslint --write \"src/**/*.js\" \"src/**/*.vue\""
  }
}
Copy the code

Modifying Rule Configuration

What you need to know is that when you mix the two, you need to change the rules to prevent duplication or conflict; Eslint-config-prettier shuts down conflicting rules eslint-config-prettier shuts down conflicting rules

"rules": {
  "prettier/prettier": "error"
}
Copy the code

In fact, when configured this way in a project, there may be some “weird” errors that cannot be resolved even with the above fixes; And this is not the prompt you expected;

Error: Delete ⏎ (prettier/prettier) at SRC /pages/ XXX

At this point, rules can be screened and sorted out to select the appropriate rules; For this, you can refer to Configuring Prettier Options & eslint-plugin-prettier# Options; According to personal coding habits, the following configuration is adopted (can be viewed at awesome-vue-cli3-example source code) :

"rules": {
  "no-console": 0,
  "prettier/prettier": [
    "error",
    {
      "singleQuote": true,
      "trailingComma": "none",
      "bracketSpacing": true,
      "jsxBracketSameLine": true,
      "parser": "flow"
    }
  ]
}
Copy the code

Add an editor configuration

The Atom editor

Prettier-atom can be installed; The Atom editor also prompts you to install more helper plug-ins;

apm install prettier-atom
Copy the code

It can be used in two modes:

• (Packages → Prettier → Toggle Format on Save)
• Manually called using the keyboard shortcut (if not selected, the entire file is formatted) :CTRL + ALT + F

VS Code editor

{
  "prettier.eslintIntegration": true,
  "eslint.autoFixOnSave": true,
  "editor.formatOnSave": true
}
Copy the code

Sublime Text editor

JsPrettier, which relies on Prettier, requires a global installation: YARN Global add Prettier; Add the following Settings in “Preferences → Setting” to realize automatic formatting when saving;

{
  "auto_format_on_save": true
}
Copy the code

Of course, you can also customize shortcuts to format code on demand; In the Preferences → Key Binding User Keymap, see the following example to inject the command (CTRL + Alt + F on Windows) :

{ "keys": ["command+alt+f"], "command": "js_prettier" }
Copy the code

See SublimeJsPrettier#Usage for more Settings and Usage details.

Pre-commit Hook Constrains code commit

# install husky & lint-staged
yarn add lint-staged husky --dev

# package.json config
"lint-staged": {
  "**/**.{js,json,pcss,md,vue}": [
    "prettier --write",
    "git add"
  ]
},
"husky": {
  "hooks": {
    "pre-commit": "yarn run precommit-msg && lint-staged",
    "pre-push": "yarn test"
  }
},
Copy the code

rm -rf .git/hooks/*
node node_modules/husky/lib/installer/bin install
Copy the code

Write it at the end of the article

“On evil, I want to know your friend, long life without absolute decline. Mountains without tombs, rivers are exhausted. Winter thunder earthquake, summer rain snow. Heaven and earth, but dare and king must.” This unexpected poem, at first sight, has nothing to do with this article. But a word of caution: the more effort you put into writing high-quality code, the less time you spend debugging. Do if you are working for the project development process, the sufficient and appropriate construction, which not only can greatly improve the code quality and speed, at the same time can save debugging, solve the problem of time overhead, but also can avoid gratuitous and a bad mood, so as to further promote the work efficiency, so make the quality of circulation, Can make you have more time to study, toss, taste life, which naturally can also include reading beautiful ancient poetry 🐉☺️; So? Have you learned that to do a good job, you must sharpen your tools?

@2018-06-15 in Shenzhen. Last Modify: 2018-06-15

Articles you may be interested in (/ useful) :