VSCode使用之Vue工程配置eslint

首先确保VS Code 安装了 Vetur 和 Eslint 插件。

然后使用了vue-cli提供的简单webpack模板,这样创建的工程默认没有添加ESLint。

vue init webpack-simple test-vscode

配置过程

全局安装最新的eslint

npm i -g eslint@latest

运行

eslint --init

会安装以下依赖

eslint-config-standard@latest
eslint-plugin-import@>=2.2.0
eslint-plugin-node@>=5.2.1
eslint-plugin-promise@>=3.5.0
eslint-plugin-standard@>=3.0.0

同时在项目目录下生成.eslintrc.js文件。里面只有最基本的内容:

module.exports = {
 "extends": "standard"
};

表明我们使用的规则是standard规范所定义的规则。

然后本地安装最新的eslint

npm i -D eslint@latest

package.jsonscripts中添加一行:

 "lint": "eslint --ext .js,.vue src"

运行:

npm run lint

VS Code会提示我们找不到eslint-config-standard

安装它:

npm i -D eslint-config-standard

然后运行

npm run lint

这时就会有报错的提示了。

4. 但是在.vue文件中出错的地方并没有相应的提示。这时Vetur排上用场了。 在VS Code的设置里面添加如下规则:

{
"eslint.validate": [
  "javascript",
  "javascriptreact",
  {
    "language": "vue",
   "autoFix": true
  }
 ]
}

这样就添加了对.vue文件的支持。

5. 但是这样会对.vue文件中的标签报解析错误

这时需要安装eslint-plugin-vue@next插件。

 npm install -D eslint-plugin-vue@next

同时在.eslintrc.js中添加使用vue插件的扩展。

// .eslintrc.js
module.exports = {
 "extends": [
   "standard",
   "plugin:vue/base"
  ]
}

这样,就可以对.vue文件提供实时检查的功能了。

6. 对于多余的逗号这种错误,可以在保存的时候让eslint插件自动修复。 更改VS Code中的设置,添加如下规则:

{
 "eslint.autoFixOnSave": true
}

总结

通过使用VS Code的插件 Vetur 、ESLint来对Vue工程中的.vue提供代码检查的功能。

1. 需要安装的依赖:
json

"eslint": "^4.14.0",
"eslint-config-standard": "^11.0.0-beta.0",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-node": "^5.2.1",
"eslint-plugin-promise": "^3.6.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-plugin-vue": "^4.0.0-beta.4",

注意: 这里 ESLinteslint-plugin-vue需要是最新的。

2. .eslintrc的配置
js

module.exports = {
"extends": [
"standard",
"plugin:vue/base"
]
};

3. VS Code 的配置
json

{
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
],
"eslint.autoFixOnSave": true
}

参考资料:
Vetur文档
ESLint文档
eslint-plugin-vue

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • vscode下vue项目中eslint的使用方法

    前言 在vscode的vue项目中,关于代码检查和格式化,遇到各种各样的问题,比如: 不清楚安装的拓展的功能,导致安装了重复功能的拓展 右键格式化文档的时候,不是按eslint的规则来格式化,导致需要我再次手动调整 保存时不能自动修复代码 以下通过自己的实践,进行了相应配置,目前可以实现: 仅安装2个推荐的拓展 右键格式化文档按照eslint规则,不会产生错误 保存时自动修复代码 vscode 拓展安装 eslint 拓展 该拓展本身不带任何插件,当前项目要使用该拓展,需要安装相应的npm包(全

  • Vue-cli Eslint在vscode里代码自动格式化的方法

    编辑器另外一个很重要的功能就是代码格式化了,VS Code默认提供常见文件的格式化,如.js,.html等. 添加对.vue文件的格式化支持 这里我们添加对 .vue 文件的格式化支持. 1. 安装 Vetur 插件 2. 在 VS Code 的设置中添加如下规则: { "vetur.format.defaultFormatter": { "html": "prettier", "css": "prettier&qu

  • VSCode使用之Vue工程配置eslint

    首先确保VS Code 安装了 Vetur 和 Eslint 插件. 然后使用了vue-cli提供的简单webpack模板,这样创建的工程默认没有添加ESLint. vue init webpack-simple test-vscode 配置过程 全局安装最新的eslint npm i -g eslint@latest 运行 eslint --init 会安装以下依赖 eslint-config-standard@latest eslint-plugin-import@>=2.2.0 eslin

  • vue项目配置eslint保存自动格式化问题

    目录 vue配置eslint保存自动格式化 插件实现按照 ESLint 规则自动格式化 1. 需求插件 2. 修改默认格式化插件 3. 「Ctrl + S」保存时按照 ESLint 规则自动格式化 vue配置eslint保存自动格式化 vue项目中有保存自动格式化,还是很舒服的,满足了大多数强迫症 1,用户设置和工作区设置 2,如何找到配置文件 3,setting.json 4,需要安装的插件 5,设置默认格式化程序 在VSCode中,两个层级的设置分别为: 用户设置:应用于所有工作区的全局设置

  • 详解VS Code使用之Vue工程配置format代码格式化

    编辑器另外一个很重要的功能就是代码格式化了,VS Code默认提供常见文件的格式化,如.js,.html等. 添加对.vue文件的格式化支持 这里我们添加对 .vue 文件的格式化支持. 1. 安装 Vetur 插件 2. 在 VS Code 的设置中添加如下规则: { "vetur.format.defaultFormatter": { "html": "prettier", "css": "prettier&qu

  • vue 如何配置eslint代码检查

    目录 1.安装依赖 2.webstorm代码格式化快捷键为win + alt + L 3.设置webstorm校验规则为本地项目安装的eslint 4.在项目本地新建.editorconfig文件 5.在项目本地新建.eslintrc.js文件 1.安装依赖 "eslint": "^5.12.0", "eslint-config-standard": "^12.0.0", "eslint-friendly-forma

  • 在vue中使用eslint,配合vscode的操作

    不管是多人合作还是个人项目,代码规范是很重要的.这样做不仅可以很大程度地避免基本语法错误,也保证了代码的可读性.这所谓工欲善其事,必先利其器,个人推荐 eslint+vscode 来写 vue,绝对有种飞一般的感觉. 每次保存,vscode就能标红不符合eslint规则的地方,同时还会做一些简单的自我修正.安装步骤如下: 首先安装eslint插件 安装并配置完成 ESLint 后,我们继续回到 VSCode 进行扩展设置,依次点击 文件 > 首选项 > 设置 打开 VSCode 配置文件,添加

  • vscode 配置eslint和prettier正确方法

    ESlint ESLint 是一款语法检测工具.因为 JavaScript 本身是一门灵活的动态语言,一千个 JavaScriptor 就有一千种写法.为了方便人们的理解,快速上手别人的代码. 说明 在开发项目的时候,往往会通过eslint来检查代码格式,而prettier用来进行代码的格式化.本篇博文主要是记录使用vscode开发vue项目时的eslint和prettier的配置. vscode 安装插件 首先,需要在vscode上安装eslint和prettier的插件. 项目中的配置文件

  • vue+webpack中配置ESLint

    一.ESLint 协同开发过程中,经常感受到来自代码检视的恶意.代码习惯不一致,看半天:居然提交低级错误,我的天(╯‵□′)╯︵┻━┻!...研究了一番,决定使用ESLint来做代码规范检查. 二.配置方式 JavaScript注释:通过JavaScript注释把配置信息嵌入代码中. package.json:在package.json文件中的eslintConfig字段中指定配置. 配置文件:通过.eslintrc.(js/json/yaml/yml)的独立文件来为整个目录或者子目录指定配置信

  • 在vscode里使用.vue代码模板的方法

    1.设置.vue模板 打开编辑器,点击文件 -- 首选项 -- 用户代码片段,会弹出来一个输入框. 在输入框输入vue,回车,会打开一个vue.json文件. 在里面复制以下代码: { "Print to console": { "prefix": "vue", "body": [ "<template>", " <div class=\"container\"

  • 在vscode中统一vue编码风格的方法

    vetur 很多人知道,但在 vscode 下没办法格式化 .vue 里的 html, js 很是头疼,代码风格无法统一. 所以不少人直接拆分开,然后在 .vue 中引入,虽然方法很好,但这有违 .vue 单文件组件的初衷. 本文详细介绍 vscode 下使用 vetur + prettier + eslint 来统一 vue 编码风格. vetur 插件 vetur 经过多个版本迭代,算是目前 vscode 下最好用的 vue 插件了,甚至支持 ts, webpack alias 等特性. 但

随机推荐