prettier makes my code very ugly

Start a short story:

Recently, many people in the group reported that the code after eslint fix was ugly. I said let me take a look, but after 2 months, I couldn't figure it out. . . (Old and transparent, I want to have a sense of existence.)

It exposed my ignorance again:

1. It was repaired by eslint or prettier
2. What kind of strange style is this

Essence: I don’t understand eslint, nor prettier, and even more so, I don’t understand html, and I don’t understand English.

Space sensitive

Why is the code of the second picture like that? Let’s review the html space problem first

<span>这是一行非常、非常长的文字~，我就问你。你敢轻易换行吗</span>

html tags are prone to inexplicable space problems . How to solve?

• A little more elegant parent element font-size: 0 , child element font-size: 12.345px
• The old driver wrote at the head and the tail tag followed closely.

Knowing the space issue, I probably understand it. The prettier should be a pot that doesn't want to recite spaces, so make the code like that.

Interested comrades, you can take a look
The format of line breaks after eslint-plugin-prettier repair is messy

prettier introduction

An opinionated code formatting tool. Provides very little configuration to assist us in code formatting.
Try to execute npx prettier --write .

prettier configuration

.prettierrc.js

module.exports = {
  // 单行代码字符数限制
  printWidth: 80,   
  // tab键缩进相当于2个空格
  tabWidth: 2,  
  // 行缩进使用空格
  useTabs: false,    
  // 语句的末尾不加分号
  semi: false,
  // 使用单引号
  singleQuote: true,    
  //仅仅当必须的时候才会加上双引号
  quoteProps: 'as-needed',    
  // 在 JSX 中使用单引号
  jsxSingleQuote: true,   
  // 尾逗号
  trailingComma: 'all', 
  //在括号和对象的文字之间加上一个空格
  bracketSpacing: true,              
  // 当箭头函数中只有一个参数的时候忽略括弧   
  arrowParens: 'avoid', 
  // vue template 中的结束标签结尾尖括号掉到了下一行
  htmlWhitespaceSensitivity: 'ignore', 
  // .vue 文件，不缩进 <script> 和 <style> 里的内容
  vueIndentScriptAndStyle: false,    
};

htmlWhitespaceSensitivity: The configuration of'ignore' is the solution to the problem I encountered.

prettier and eslint

Now the conventional configuration scheme: prettier is responsible for fixing the code format, and eslint is responsible for potential quality problems of the code.

The official website says that prettier is opinionated. Therefore, other people can't interfere with the work it wants to handle, and we must disable eslint's formatting rules. Not disabled? Then an endless loop.

Insert a question: How to implement prettier and eslint, do you all know? I'm not sure, just check the document.

Based on the above reasons, in the project we have to rely on two dependencies: eslint-config-prettier , eslint-plugin-prettier

eslint-config-prettier: Responsible for turning off all format-related rules of eslint

eslint-plugin-prettier: integrate prettier into eslint and run prettier as a rule of eslint.

See here, what do you mean by eslint(prettier/prettier)

.eslintrc.json

{
  "extends": [
    ....
    // eslint-config-prettier
    "prettier" 
  ]
  //eslint-plugin-prettier
  "plugins": ["prettier"], 
  "rules": {
    "prettier/prettier": "error",
    ....
  }
}

Even if I have mastered the basics of the above prettier

Little Q

What is the extension and plug-in? Welcome to leave a message to discuss

I'm very culinary and anxious, but I haven't given up yet; give me an offer and I will leave immediately