在vs-code使用eslint-阿里云开发者社区

开发者社区> 开发与运维> 正文

在vs-code使用eslint

简介: 以前一直不想用eslint的原因是用了eslint之后,我无法使用格式化代码的功能,一格式化代码就红红的一遍,事实证明我错了,eslint本身就可以根据根据帮你去格式化代码,下面是vs-code使用eslint的步骤(mac环境下) 全局按照eslin...

以前一直不想用eslint的原因是用了eslint之后,我无法使用格式化代码的功能,一格式化代码就红红的一遍,事实证明我错了,eslint本身就可以根据根据帮你去格式化代码,下面是vs-code使用eslint的步骤(mac环境下)

全局按照eslint

sudo npm i eslint -g (window不用加sudo)

在你的项目中使用

  1. 使用 eslint --init 来初始化eslint
    img_4b37915c427bf05ee56317f35e6276df.png
    image.png

上图的意思是问你喜欢怎样配置你的eslint,第一项是使用一些通用的配置,第二项目是通过问答式来配置,第三项则是检查的js代码,这里我们选择第一项

  1. 回车之后我们看到了下图,选择standard风格


    img_6a4013dd3671a199403fb654c143628f.png
    image.png
  2. 接下来就根据提示和你的项目的情况去选择就好了,配置完毕之后,你的项目就多了个.eslintrc的文件


    img_bf6abb39bad6d498b683839f40b9b92a.png
    image.png
  3. 此时随便建一个文件来测试一下


    img_e3b40e7ef9e32331eb44ea77dcd14f61.png
    image.png

    因为代码写得不规则,所以就有很多报错的信息,至此,我们的配置就完成了,另外下面还有些小技巧

技巧

  1. 给vs-code安装eslint插件


    img_d57f8611878544e66b90b0b9bec5c985.png
    image.png
  2. 打开首选项->设置->用户 settings.json


    img_eaee2424de43c8df74f4653f0ca69c49.png
    image.png

    点击右边的省略号打开用户settings.json


    img_4af4973a5808644e517c37297060ac8d.png
    image.png

    添加以下配置
 "editor.tabSize": 2,   // 回车的时候使用两个空格的tab
    "eslint.autoFixOnSave": true, // 保存文件的时候使用eslint自动fix
    "files.autoSave":"off",
    "eslint.validate": [
       "javascript",
       "javascriptreact"
     ],
    "eslint.alwaysShowStatus": true
img_b5b782f8be09c4f610c87d07f60675f5.png
image.png

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章