老项目如何使用VScode或者webstorm格式化eslint/prettier规则

eslint fixed 感觉处理起来不那么方便，就想鼠标右键，格式化文件夹。像webstorm refactor 代码，并不是格式化的代码。之前写过《intellij前端代码格式化优化设置—为Vue推荐标准需要做的修改》，但是并不好使

prettier有蛮多地方与eslint冲突。像我就只想用eslint，配置eslint，编辑器自动保存并按照eslint 格式化代码，如何操作

个人在使用还是偏好webstorm，本人一直使用intellij，无论是java、Android、fluter、前端，都是这个编辑器

Intellij/webstorm eslint配置

配置步骤如下：

1、安装eslint插件

配置eslint

配置esint快捷键

在文件夹右键

webstorm、intellij prettier 也是同样的操作步骤

vscode eslint格式化文件夹

同样，安装 eslint 插件、prettier 插件

有这么一个工具

我师父涛哥，给我推荐这个工具

https://marketplace.visualstudio.com/items?itemName=lacroixdavid1.vscode-format-context-menu

但是，我折腾不来vscode，intellij 真香……

在这里面，遇到了 ：Use the latest vue-eslint-parser 错误，按照官方解决办法：https://vuejs.github.io/eslint-plugin-vue/user-guide/#faq

被vscode各种 冲突配置绕晕了

建议参考此篇：Vue 项目eslint 配置编程风格（VScode），https://blog.csdn.net/ZY_FlyWay/article/details/109380960

一些淌过的坑

之前自己从头配，貌似没有遇到这次这么多问题。当然，个人个喜欢react 项目

Use the latest vue-eslint-parser 

原来eslint配置

module.exports = {
  root: true,
  env: {
    browser: true
  },
  'parser': 'vue-eslint-parser',
  'parserOptions': {
    'parser': 'babel-eslint',
    // 'ecmaVersion': 2017,
    'sourceType': 'module'
  },
}

去掉 parser 属性即可

https://github.com/vuejs/eslint-plugin-vue/issues/30

关于 vue essential recommend 区别，我是使用recommend，这样代码看起来舒服很多，何况有 自动格式化工具，何乐不为呢?

https://eslint.vuejs.org/rules/no-duplicate-attributes.html

Babel ESLint: TypeError: Cannot read property 'range' of null

https://stackoverflow.com/questions/42978761/babel-eslint-typeerror-cannot-read-property-range-of-null

我是babel-eslint 减到7.x.x 就可以了

还是有蛮多错误，需要手动去改，想 函数里面的冗余变量。这个可以修改 rule，改为1，先跑，以后去修改

想catch 没有 (e)，这个需要人肉修复。

哎，赶紧回家睡觉，……

转载本站文章《老项目如何使用VScode或者webstorm格式化eslint/prettier规则》,
请注明出处：https://www.zhoulujun.cn/html/Operation/codeGuide/8580.html