In Vue project, solve the problem of verification conflict when eslint and prettier are used at the same time

vue Solved in the project eslint And prettier Verification conflict when using at the same time

1. Demand background

• Recently, there are code verification tools in the project eslint Based on that, I added prettier, The reason is also to restrict the development team to unify the code style , The original intention is good , However, in the actual use process, there is a verification conflict between the two code verification tools .

Solution

• In fact, the root of the conflict is that both of them are involved in verifying the code format , However, the verification rules of the two are not necessarily the same , This is the root of the conflict .

• The idea of solution is to let eslint Focus on the verification of code quality problems , Other code style issues make prettier To deal with it, we can solve the conflict , The specific treatment is as follows ：

• 
  // 1. install  eslint-config-prettier  plug-in unit （ The function is to turn off  (disable)  All and  Prettier  Conflicting  ESLint  Configuration of ）：
  npm install --save --dev eslint-config-prettier
  
  // 2. install  eslint-plugin-prettier  plug-in unit （ Role is to  prettier  Of  rules  Add to as a plug-in  ESLint  Inside , And it can make prettier The verification rules of are based on eslint Throw out , Make the code prompt more