整理项目中的代码规范

整理代码规范

每个人的公司都有一套自己的代码规范,当你的代码已经搞定了产品需求时,公司告诉你需要按照代码规范去提交代码,然而当你看着公司给你的规范模版一脸懵逼,不要紧, 让小编拯救你~~~

  • 编辑工具 Vs Code
  • 插件 es beautifier

当你在check代码的时候会遇到这种情况

image.png

还有什么变量函数提升之类的~~~~还有很多未知的东西~~~。当你看到这些的时候 你的脑子中是不是已经有千万只草泥马在奔腾

小编也不啰嗦了 直接上手拯救你们~~~

你需要一个轻便好用的编辑器~(现在最火的编辑器是Vs Code 下载地址 :http://www.vscode.org/

接着在你的项目中全局安装: npm install es-beautifier -g --only=production

下载完成之后安装两个插件:eslint es-beautifier

在你的项目也要安装代码规范插件: npm install eslint eslint-plugin-es-beautifier --save-dev

接着在你的项目中去找到 .eslintrc。或者是在package.json中的 eslintConfig 去配置 (如果之前你有设置请增加不要替换~~~)

{
  "plugins": [
    "es-beautifier"
  ],
  "extends": [
    "plugin:es-beautifier/standard"
  ]
}

现在的时候可以把你们公司的代码规范整理一下把eslintrc.json中的relus替换一下~

接着在package.json中的scripts中去配置:

{
  "scripts": {
    "beautify": "eslint --fix ."
  }
}

最后你在在命令行中打上:

npm run beautify

这样你就会发现你现在的代码会按照你公司的代码规范很整洁~~~

如果你是有问题的话请看一下原文链接:
https://github.com/dai-shi/es-beautifier

如果看不懂请留言~~~。小编会在百忙之中为你解答 谢谢~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,161评论 25 708
  • ESLint 配置 ESlint 被设计为完全可配置的,这意味着你可以关闭每一个规则而只运行基本语法验证,或混合和...
    静默虚空阅读 41,525评论 3 14
  • EsLint入门学习整理 这两天因为公司要求,就对ESLint进行了初步的了解,网上的内容基本上都差不多,但是内容...
    点柈阅读 26,066评论 3 42
  • 昨晚去看了美国的电影《一条狗的使命》,从题目就可以看出来这是一部以狗为主线讲述故事的作品。以一条狗的视野去描述了这...
    瓷瓦阅读 407评论 0 1
  • 这个简书有好几个月没写过了,记得是上次正想写的时候网页好像打不开从此就暂停了。 从2016年9月恢复单身以来工作上...
    九萌阅读 725评论 15 45