在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
目录
相关文章
|
前端开发
VScode执行tsc xx.ts出现以下错误
VScode执行tsc xx.ts出现以下错误
|
1月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。
【10月更文挑战第7天】随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这两个工具,可以确保代码风格一致,提升团队协作效率和代码质量。
235 2
|
2月前
|
JavaScript
TS语法忽略、eslint忽略
TS语法忽略、eslint忽略
94 1
|
20天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这些工具,可以确保代码风格一致,提高代码质量和可读性。
49 1
|
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
49 3
|
JavaScript
解决eslint 报错的方法
解决eslint 报错的方法
392 1
|
6月前
|
JSON 缓存 前端开发
Unexpected end of JSON input while parsing near '....1","eslint-loader":"'
Unexpected end of JSON input while parsing near '....1","eslint-loader":"'
67 0
|
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]的方法
|
11月前
|
前端开发 JavaScript
Module build failed: TypeError: this.getResolve is not a function,vue写css时启动出错
Module build failed: TypeError: this.getResolve is not a function,vue写css时启动出错
46 0