We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
首先确保VS Code 安装了 Vetur 和 Eslint 插件。 然后使用了vue-cli提供的简单webpack模板,这样创建的工程默认没有添加ESLint。
vue init webpack-simple test-vscode
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文件。里面只有最基本的内容:
.eslintrc.js
module.exports = { "extends": "standard" };
表明我们使用的规则是standard规范所定义的规则。 2. 然后本地安装最新的eslint
standard
npm i -D eslint@latest
package.json
scripts
"lint": "eslint --ext .js,.vue src"
运行:
npm run lint
VS Code会提示我们找不到eslint-config-standard:
eslint-config-standard
安装它:
npm i -D eslint-config-standard
然后运行
这时就会有报错的提示了。
.vue
{ "eslint.validate": [ "javascript", "javascriptreact", { "language": "vue", "autoFix": true } ] }
注意这里添加了 .vue 文件自动修复的规则,如果不添加这个规则,则保存时不会自动修复 .vue文件。 这样就添加了对.vue文件的支持。 5. 但是这样会对.vue文件中的标签报解析错误
这时需要安装eslint-plugin-vue@next插件。
eslint-plugin-vue@next
npm install -D eslint-plugin-vue@next
同时在.eslintrc.js中添加使用vue插件的扩展。
// .eslintrc.js module.exports = { "extends": [ "standard", "plugin:vue/base" ] }
这样,就可以对.vue文件提供实时检查的功能了。
{ "eslint.autoFixOnSave": true }
通过使用VS Code的插件 Vetur 、ESLint来对Vue工程中的.vue提供代码检查的功能。
"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",
这里 ESLint
eslint-plugin-vue
.eslintrc
module.exports = { "extends": [ "standard", "plugin:vue/base" ] };
{ "eslint.validate": [ "javascript", "javascriptreact", { "language": "vue", "autoFix": true } ], "eslint.autoFixOnSave": true }
参考资料: Vetur文档 ESLint文档 eslint-plugin-vue
The text was updated successfully, but these errors were encountered:
No branches or pull requests
首先确保VS Code 安装了 Vetur 和 Eslint 插件。
然后使用了vue-cli提供的简单webpack模板,这样创建的工程默认没有添加ESLint。
配置过程
运行
会安装以下依赖
同时在项目目录下生成
.eslintrc.js
文件。里面只有最基本的内容:表明我们使用的规则是
standard
规范所定义的规则。2. 然后本地安装最新的eslint
package.json
的scripts
中添加一行:运行:
VS Code会提示我们找不到
eslint-config-standard
:安装它:
然后运行
这时就会有报错的提示了。
.vue
文件中出错的地方并没有相应的提示。这时Vetur排上用场了。 在VS Code的设置里面添加如下规则:注意这里添加了
.vue
文件自动修复的规则,如果不添加这个规则,则保存时不会自动修复.vue
文件。这样就添加了对
.vue
文件的支持。5. 但是这样会对
.vue
文件中的标签报解析错误这时需要安装
eslint-plugin-vue@next
插件。同时在
.eslintrc.js
中添加使用vue插件的扩展。这样,就可以对
.vue
文件提供实时检查的功能了。总结
通过使用VS Code的插件 Vetur 、ESLint来对Vue工程中的
.vue
提供代码检查的功能。这里 ESLint
和eslint-plugin-vue
需要是最新的。.eslintrc
的配置参考资料:
Vetur文档
ESLint文档
eslint-plugin-vue
The text was updated successfully, but these errors were encountered: