admin管理员组

文章数量:1530875

2021更新

prettier官方更新了一个插件，引入更加方便。
npm install --save-dev eslint-plugin-prettier

module.exports = {
  plugins: ['prettier'],
  'extends': [
    '@vue/prettier',
    '@vue/prettier/@typescript-eslint'
  ],
}

代码风格与代码检测冲突

我们经常使用prettier与eslint进行代码格式化与代码检测，但是经常遇见格式化之后依然存在代码检测的异常，这主要是因为eslint的配置没有与prettier的规则设置为相同。
我查看了网上给的设置都比较过时了，prettier官方提供了一个新的方法

例子

通过prettier格式化之后，报错

设置方法

  1. 首先在vscode的setting.json中添加prettier的设置
  "editor.codeActionsOnSave": {
    // For ESLint
    "source.fixAll.eslint": true
  }
  1. 安装 eslint-config-prettier
npm install --save-dev eslint-config-prettier
  1. 在.eslintrc.js里添加prettier的规则
module.exports = {
  "你自己的其他配置",
   "prettier"// 最好放在最后
}

额外添加prettier配置

如果我们只需要对VUE文件进行统一，我们可以进行单独的配置

"extends": [
     "你自己的其他配置",
    "prettier",
    "prettier/@typescript-eslint",
    "prettier/babel",
    "prettier/flowtype",
    "prettier/react",
    "prettier/standard",
    "prettier/unicorn",
    "prettier/vue"
  ]

结果

添加完成后，就eslint就会结合prettier的规则进行检测

本文标签： 报错VSCodeprettiereslint

版权声明：本文标题：vscode中prettier与eslint一起使用格式化时候会报错 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dongtai/1726470900a1072086.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。