preface

I believe that many partners have struggled with the formatting of their own code, especially when working in a team, with a variety of front-end language complex, a variety of grammar sugar + team personal coding habits, will make you feel a mess.

In the past, we’ve tried a lot of things, from EditorConfig to various *** Lints, and looked at various configurations, but it still hasn’t met our needs. Prettier helps you now.

introduce

“Prettier” is an arbitrary formatting tool. I didn’t understand this at first, because I was used to tinkering with various configurations, trying to get one that really fit my team’s style habits, and it was always on the way.

13. Why is the word “prettier” arbitrary? While “prettier” is not an prettier tool, “lint” usually uses “prettier” for formatting and does not have “lint” for syntax checks. Although prettier provides configuration, it can only configure a few key attributes, which can ensure the code style is unified to some extent, and the threshold for using prettier is very low. The key style of prettier is not ugly, and it is easier for people to accept.

Also, prettier supports most of the language processing we currently do, JavaScript · Flow · TypeScript · CSS · SCSS · Less · JSX · Vue · GraphQL · JSON · Markdown, which means, You can do almost any code formatting problem with a single tool.

How to play

“Prettier”, the prettier editor on the prettier website, for example

  • The plug-in

    Install the plug-in prettier-vscode for VSCode first

    After the installation, the default formatting of the editor is replaced by “prettier”. The default shortcut key is Alt + Shift + F

  • configuration

    After the prettier plug-in is installed, the configuration node of the prettier plug-in is displayed in setting.json on the editor, and some default configuration information about prettier is displayed.

    You can change the global configuration of some editors based on personal or team preferences. An prettierrc configuration file, for example, an prettierrc configuration file, where an prettierrc is used for teams to work together. For details about configuration file options, see the official website: prettier. IO /docs/en/con…

introduces

Vue + typescript + SCSS project

The default format tool for vetur is also the prettier, very close.

  • Typescirpt, you still need to use tslint and tslint-config-prettier

    $ yarn add -D tslint tslint tslint-config-prettier
Copy the code

    Add tsLint. json to the project root directory using the official recommended configuration: tsLint :recommended

    {
  "extend": ["tslint:recommended"."tslint-config-prettier"],}Copy the code

    Thus tslin-config-prettier overwrites the configuration that previous Lints used for formatting, and so does other Lints.

  • SCSS, stylelint and prettier-stylelint

    $ yanr add -D stylelint prettier-stylelint stylelint-config-ydj
Copy the code

    Add styLint configuration file.stylelintr.js to the project root

    module.exports = {
    extends: [
        'stylelint-config-ydj/scss'.// your stylint config
        './node_modules/prettier-stylelint/config.js'].rules: {
        'string-quotes': 'double'}};Copy the code

  • Prettier configuration

    For project-level configuration, the configuration file is added to the root directory of the project. Prettierrc

    {
    "eslintIntegration": true."stylelintIntegration": true."tabWidth": 4."singleQuote": true."semi": false
}
Copy the code

PS: 0: Vetur’s Template is not formatted yet Prettier is not well supported. Shape (js-Beautify-HTML), which is about to be deprecated, but the new integration has not yet been released. The js-Beautify-html +prettier plugin may cause template blocks to not format, so add this to the editor configuration

// vetur configuration
"vetur.format.defaultFormatter.html": "js-beautify-html",

// prettier configuration
"prettier.disableLanguages": [
    "vue"].Copy the code

Final effect demonstration

Other types of project and language configuration are in the next article!