在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
目录
相关文章
|
3月前
optional install error: Error: Unsupported URL Type: npm:vue-loader@^16.1.0
optional install error: Error: Unsupported URL Type: npm:vue-loader@^16.1.0
46 3
|
4月前
|
JavaScript
Eslint-------error ‘Vue‘ is not defined no-undef
Eslint-------error ‘Vue‘ is not defined no-undef
|
JavaScript C# 开发工具
20款VS Code实用插件推荐
20款VS Code实用插件推荐
278 0
|
12月前
|
JavaScript
解决eslint 报错的方法
解决eslint 报错的方法
372 1
|
12月前
cnpm i安装报错-Install fail! Error: Unsupported URL Type: npm:vue-loader@^15.9.7
cnpm i安装报错-Install fail! Error: Unsupported URL Type: npm:vue-loader@^15.9.7
486 1
|
6月前
报错You may use special comments to disable some warnings.vue-cli脚手架关闭eslint的步骤
报错You may use special comments to disable some warnings.vue-cli脚手架关闭eslint的步骤
|
11月前
又被ESLint 调戏了!!! ESLint:Newline required at end of file but not found. eslint(eol-last) [12, 22]
又被ESLint 调戏了!!! ESLint:Newline required at end of file but not found. eslint(eol-last) [12, 22]
|
11月前
|
JavaScript
解决Vue项目报错:Expected indentation of 2 spaces but found 4. eslint(indent) [8, 1]的方法
解决Vue项目报错:Expected indentation of 2 spaces but found 4. eslint(indent) [8, 1]的方法
|
JavaScript C++
npm install报错peerDependencies WARNING eslint-plugin-vue@^5.2.3 requires a peer of eslint@^5.0.0 but
npm install 报错,以为是npm问题,改成cnpm install,也还是报错,根据错误信息提示,推断是eslint版本不兼容。
732 0