search

nicejade / vuepress-web-app

📝 采用 VuePress 构建的 Web 应用程序，支持 Pwa、Github Issues 评论、Prettier Markdown 等。
https://nice.lovejade.cn/
68 stars 29 forks source link

使用ESLint ＆ Prettier美化Vue代码 | 静晴轩别苑 #4

Open nicejade opened 5 years ago

nicejade commented 5 years ago

https://nice.lovejade.cn/zh/article/beautify-vue-by-eslint-and-prettier.html

Prettier 是一个有见识的代码格式化工具。它通过解析代码并使用自己的规则重新打印它，并考虑最大行长来强制执行一致的样式，并在必要时包装代码。如今，它已成为解决所有代码格式问题的优选方案；您可以结合 ESLint 和 Prettier，检测代码中潜在问题的同时，还能统一团队代码风格，从而促使写出高质量代码，来提升工作效率。

ZMDreamer commented 5 years ago

麻烦我想问问， 就是我们之前项目配置好了prettier的规则， 之前一直都很好， 但是可能是更新包后， 我这个就出问题了，一直报错， 但是格式化后的代码就是那样的

nicejade commented 5 years ago

@ZMDreamer 请问下报的错是？

ZMDreamer commented 5 years ago

就是我们的包更新了但是效验的配置还是之前的， 现在的eslint-plugin-vue的包更新了，但是配置还是之前的， 这样的话我项目在保存的时候，自动格式化代码，代码格式化不成功就会一直报我的格式错误

ZMDreamer commented 5 years ago

image 就是我会报上面的错， 如果我像下面这样设置就不会出现这样的问题？但是我的格式化代码规则就不起作用了 image。我想知道这是为什么呢？谢谢你，期待你的回答

nicejade commented 5 years ago

@ZMDreamer 看起来，这里也是同时使用了 eslint 和 pretitter；从过往经验看，,eslintrc.js 文件不是必须的，可以将相关规则配置，统一于 package.json，这将更易于排查问题和维护；目前这种配置方式，这边没有使用过，所以不能给予很好的答复。

ZMDreamer commented 5 years ago

好的， 谢谢回答！请问那个利用package.json是如何进行配置的呢？你这边有博客介绍吗

nicejade commented 5 years ago

@ZMDreamer 嗯，这篇文章中介绍的就是这种用法；当然也可以参考具体的项目设定，如 awesome-vue-cli3-example | package.json；当然，这个也不止仅用在 Vue 项目，其他的前端框架依然适用；如 React、快应用（Quickapp） 等， 具体可参见 quickapp-boilerplate-template/package.json。

ZMDreamer commented 5 years ago

嗯，谢谢答复！那我的webpack需要做其它的配置吗？是在package.json中配置就会自动识别吗？

nicejade commented 5 years ago

@ZMDreamer 客气，webpack 中无需更多的配置。

nicejade commented 4 years ago

如何忽视不需要 prettier 的代码

倘若遇到部分不需要 prettier 的文件，可以在 .prettierignore 文件中，对该文件进行忽视即可；

# .prettierignore file

node_modules/
preview/dist/

如果是文件的某行代码，可以参考 prettier ignore，在对应行之前，根据文件类型，加入忽视注释即可，比如 JavaScript 代码，可以做如下设置：

// prettier-ignore
matrix(
  1, 0, 0,
  0, 1, 0,
  0, 0, 1
)