继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

vscode+eslint让你编程快到飞起

Ewall_
关注TA
已关注
手记 85
粉丝 7084
获赞 266

还在每次写完代码以后,点击鼠标(或者使用快捷键)格式化文档让代码保持整齐?还在因为装了eslint后经常报出eslint校检语法错误而犯愁?——以至于装后又卸载eslint。这篇文章让你不再为语法校对烦恼,让你编程快到飞起。
vscode版本: 1.37.0

1、安装eslint

(1)vue项目中安装eslint插件

  • 当你构建一个新的项目的时候,就以构建一个新的vue项目来说,默认把eslint安装就好。
    默认安装eslint

  • 如果项目中没有安装,那就只能手动安装了撒。传送门:eslint官网

$ npm install eslint --save-dev

(2)vscode中eslint扩展安装

  • 我用的是vscode,如果你是用的其他工具自行google,反正原理都一样。
    eslint扩展

2、配置

  • 进入到setting.json文件中,添加一下代码:
   "files.autoSave": "off",
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "vue-html",
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    "eslint.run": "onSave",
    "eslint.autoFixOnSave": true,
  • 很多人配置不成功大部分都是添加代码方式不对,特意上一份我的配置文件截图:
    settings.json

3、结语

  • 当你完成了如上所有的配置以后,当你command+s(ctrl+s)点击保存的时候,eslint就会帮你自动格式化以符合.eslintrc.js文件中的规则,让你编程快到飞起,不用再为了修复eslint报错的冲突而烦恼。

效果预览.gif

打开App,阅读手记
1人推荐
发表评论
随时随地看视频慕课网APP