时间:2021-05-26
前言
在vscode的vue项目中,关于代码检查和格式化,遇到各种各样的问题,比如:
以下通过自己的实践,进行了相应配置,目前可以实现:
vscode 拓展安装
eslint 拓展
该拓展本身不带任何插件,当前项目要使用该拓展,需要安装相应的npm包(全局安装或当前项目安装)
对于 vue 项目,通常在 vscode 中做如下设置:
//保存时自动修复代码 "eslint.autoFixOnSave": true, "eslint.options": { // 应检查代码的文件扩展名数组 "extensions": [ ".js", ".vue" ] }, // 配置要验证的语言标识和自动修复选项,比前面两个配置的结合更为细粒度话。可以仅配置下面代码 "eslint.validate": [ "javascript", "javascriptreact", "html", { "language": "vue", "autoFix": true } ],vetur 拓展
vue 工具,主要有以下功能
Syntax-highlighting 语法高亮
Snippet 快速定义脚手架代码片段,如:写script后会跳出export default{xxx},style 后面会带lang、scope等
Emmet 仿css选择器快速生成 html/css 代码
Linting / Error Checking vetur的 Linting 仅用于快速启动,对于规则配置需要用eslint.validate
Linting 不可配置,且自带了一个固定版本的eslint-plugin-vue,一般我们不用。而是采用以下配置:
Formatting 即右键的Format Document功能,不支持格式化选中内容。
可以在设置中配置vetur.format.defaultFormatter \ 如:默认"vetur.format.defaultFormatter.html": "prettyhtml",也可将值设为 none 就不会格式化该类文件了 \ 这个默认设置非常难用,会将vue文件变得很乱,比如默认加分号,属性按列展开;我们在设置中进行如下配置即可实现格式化vue文件时按eslint的规则来
"vetur.format.defaultFormatterOptions": {"js-beautify-html": {// 属性列太长才折行,默认的force-expand-multiline不美观"wrap_attributes": "auto"},"prettier": {//去掉代码结尾分号"semi": false,//使用eslint的代码格式进行校验"eslintIntegration": true,//采用单引号"singleQuote": true}},//格式化.vue中html,js"vetur.format.defaultFormatter.html": "js-beautify-html","vetur.format.defaultFormatter.js": "vscode-typescript",//让函数(名)和后面的括号之间加个空格"javascript.format.insertSpaceBeforeFunctionParenthesis": true,IntelliSense 智能感知vue文件结构,比如<template>中提供了html标签和属性的感知,当编辑<template>时如同编辑html文件一样,让其他插件可以如html支持一样进行支持<template>
Debugging 调试功能
Framework Support for Element UI and Onsen UI UI框架支持
如果想使用Format Selection功能,需要再下载prettier-Code formatter拓展。
但只要配置合理,全文格式化未尝不可
eslintrc 配置
安装完上文两个拓展和进行相应配置后,还需要 对.eslintrc.js 进行配置。文件不存在或配置不当,编码时不会进行错误提示
若使用@vue/cli 初始化项目并选择支持eslint,则默认生成时就存在了。
否则需要手动生成:
详见Installation
.eslintrc.js
早期的一个配置
// http://eslint.org/docs/user-guide/configuringmodule.exports = { root: true, parser: 'babel-eslint', parserOptions: { sourceType: 'module' }, env: { browser: true, }, // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style extends: 'standard', // required to lint *.vue files plugins: [ 'html' ], // add your custom rules here 'rules': { // allow paren-less arrow functions 'arrow-parens': 0, // allow async-await 'generator-star-spacing': 0, // allow debugger during development 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 }}当前配置(主流):extends配置vue校验规则,parser移至parserOptions下,plugins中配置为vue
// http://eslint.org/docs/user-guide/configuringmodule.exports = { root: true, // parser: 'babel-eslint', parserOptions: { sourceType: 'module', parser: 'babel-eslint', }, env: { browser: true, }, // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style extends: [ // 按从上往下的规则匹配 //推荐校验 "plugin:vue/recommended", //基本校验 //"plugin:vue/essential", "standard" ], // required to lint *.vue files plugins: [ 'vue' ], // add your custom rules here 'rules': { // allow paren-less arrow functions 'arrow-parens': 0, // allow async-await 'generator-star-spacing': 0, // allow debugger during development 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 }}plugin:vue/recommended 下 wrap_attributes 的规则是force-expand-multiline
即按上述配置,格式化文档时,属性会变成一列(auto),但保存时的eslint 的autoFix会按 force-expand-multiline 多行展开。
觉得麻烦的,可以配置为plugin:vue/essential
配置分享
settings.json
// 将设置放入此文件中以覆盖默认设置{ "editor.fontSize": 12, "editor.tabSize": 2, "files.associations": { "*.vue": "vue" }, "eslint.autoFixOnSave": true, "eslint.options": { "extensions": [ ".js", ".vue" ] }, "eslint.validate": [ "javascript", "javascriptreact", { "language": "html", "autoFix": true }, { "language": "vue", "autoFix": true } ], "vetur.validation.template": false, "vetur.format.defaultFormatterOptions": { "js-beautify-html": { // 属性列太长才折行,默认的force-expand-multiline不美观 "wrap_attributes": "auto" }, "prettier": { //去掉代码结尾分号 "semi": false, //使用eslint的代码格式进行校验 "eslintIntegration": true, //采用单引号 "singleQuote": true } }, //格式化.vue中html,js "vetur.format.defaultFormatter.html": "js-beautify-html", "vetur.format.defaultFormatter.js": "vscode-typescript", //让函数(名)和后面的括号之间加个空格 "javascript.format.insertSpaceBeforeFunctionParenthesis": true, "search.exclude": { "**/Node_modules": true, "**/bower_components": true, "**/dist": true }, "git.confirmSync": false, "window.zoomLevel": 0, "editor.renderWhitespace": "boundary", "editor.cursorBlinking": "smooth", "editor.minimap.enabled": true, "editor.minimap.renderCharacters": false, "editor.fontFamily": "'Droid Sans Mono', 'Courier New', monospace, 'Droid Sans Fallback'", "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}", "editor.codeLens": true, "editor.snippetSuggestions": "top", "workbench.colorTheme": "Solarized Light", "extensions.ignoreRecommendations": false}参考 :
eslint-plugin-vue: https://eslint.vuejs.org/user-guide/
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对的支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
vue-cli脚手架创建的项目默认使用ESlint规则,启动项目的时候因为各种语法报错,不得不先停下了解一下什么是ESlint,及其相关的一下操作。【使用vue
在vue项目中使用vscode编辑时,使用了如下这套配置,保存时就会根据既定vue项目中.eslintrc.js文件设置的既定规则自动校验并依据规则修复代码。需
最近新建一个vue-cli4的项目,初始化的时候没开启eslint,后面想开启的时候不好配置,这里就做个开启eslint和保存时自动修复格式的总结vscode首
在Vue项目中使用mock.js开发工具选择:Vscode1.使用命令行创建vue项目(手动选择Babel,Router,Vuex)2.导入element-ui
本文是对vue项目中自带文件eslintrc.js的内容解析,介绍了各个eslint配置项的作用,以及为什么这样设置。比较详细,看完能对eslint有较为全面的