[开发工具]vscode格式化文档与eslint检测发生冲突，配置prettier

vscode 格式化文档 与 eslint检测 发生冲突，配置prettier

ESLint是一个插件化的代码检测工具，它检测代码是否符合定义的代码规范，是不会对代码进行更改的。

vscode的格式化文档是能对文档的代码进行格式调整。

Prettier是一款代码格式化工具

发现冲突

当项目依赖了eslint工具时，进行格式化文档可能导致报错。

如：

有一个项目依赖了eslint，项目中的eslint有如下的部分规定：

1. 代码中不使用分号
2. 字符串使用单引号而不使用双引号
3. 不使用尾逗号

以下这段代码eslint检测不会报错

<script>
export default {
  name: 'app'
}
</script>

但当使用了格式化文档时，代码可能变成：

<script>
export default {
  name: "app",
};
</script>

如此eslint检测报错

解决冲突

使用代码格式化工具Prettier来解决问题。

1. 安装Prettier

   方式一：在vscode的插件扩展搜索prettier

   

   方式二：通过npm安装prettier

   npm install --global prettier
   

2. 为项目配置prettier的三种方法

   • 方法一：在项目根目录下配置.prettierrc文件

     {
       "semi":false,
       "singleQuote":true,
       "trailingComma": "none"
     }
     

   • 方法二：在项目根目录下创建prettier.config.js文件

     module.exports = {
       "semi":false,
       "singleQuote":true,
       "trailingComma": "none"
     }
     

   • 方法三：在package.json文件配置（添加）prettier属性

     "prettier": {
         "semi":false,
         "singleQuote":true,
         "trailingComma": "none"
     }
     

▲注意：以上三种配置方法是有优先级的，不要同时使用两种以上配置方法

在package.json 中配置prettier属性就不会执行.prettierrc 文件

有.prettierrc 文件就不会执行prettier.config.js 文件