参见:https://www.cnblogs.com/mengfangui/p/9516578.html
1.eslint 一个插件化的 javascript 代码检测工具,它可以用于检查常见的 JavaScript 代码错误,也可以进行代码风格检查 使用到两个扩展包(airbnb规范 & eslint-plugin-vue ) eslint-plugin-vue (vue官方eslint插件,检测vue语法) 官方文档链接 airbnb规范标准: 官方文档链接 1.1 如何安装eslint npm install error': 'off', //是否禁止console.log "no-var": "warn", "no-eval": "warn",//禁止使用eval } 1.5.2 Vue 相关(eslint-plugin-vue
最后,我们找到了eslint-plugin-vue,这个插件能完美处理.vue文件,而且还预置了很多可复用的rules(eslint规则)。 使用方法如下: 第一步: npm install --save-dev eslint-plugin-vue 安装eslint vue支持插件 第二步: .eslintrc.js文件中添加plugin说明 js语法规则去写配置项,也方便注释 module.exports = { // ...其他配置项 plugins: [ 'vue' ] // ...其他配置项 } 第三步:使用eslint-plugin-vue blob/master/docs/RULES-en.md extends: [ 'plugin:vue/base' ], } 这里我们使用的是base里面的规则,更多的预置规则可以参考文档(eslint-plugin-vue
eslint-config-prettier": "^7.0.0", "@vue/eslint-config-typescript": "^11.0.0", "eslint": "^8.22.0", "eslint-plugin-vue arrowParens: 'avoid', // 箭头函数尽可能省略括号 } ] } 单独拎出一个来说 'vue/max-attributes-per-line' // 强制每行的最大属性数, 这个在eslint-plugin-vue
如果想检测vue组件的语法,需要 eslint-plugin-vue ESLint >=3.18.0. >=4.7.0 to use eslint --fix. >=4.14.0 to use 需要注意以下几点: 要校验vue组件,需要安装 ,并在配置中增加 plugin:vue/recommended eslint-plugin-vue 用于校验es6的import规则,如果增加 注意:eslint需要全局安装,对应的eslint-plugin-vue, eslint-plugin-import等插件也需要全局安装才能使用fix。
eslint-plugin-vue[15] Vue 官方的 ESLint 插件。 vue-eslint-parser[16] 自定义 ESLint 解析 .vue 单文件的解析器。 create-vue [13] vue-cli: https://github.com/vuejs/vue-cli [14] Vetur: https://github.com/vuejs/vetur [15] eslint-plugin-vue : https://github.com/vuejs/eslint-plugin-vue [16] vue-eslint-parser: https://github.com/vuejs/vue-eslint-parser
比如Vue3对应eslint-plugin-vue。 3.2.1 安装 yarn add -D eslint eslint-define-config eslint-plugin-vue vue-eslint-parser @typescript-eslint /eslint-plugin @typescript-eslint/parser eslint:判断代码是否符合规则; eslint-define-config:大部分开发者使用的默认规则; eslint-plugin-vue
Eslint的规则检查下出现报错:Elements in iteration expect to have ‘v-bind:key’ directives Eslint规则检查显示如下: 报错信息如下: [eslint-plugin-vue
ant-design/icons-vue"], }, }; 详见:Vite - Config File, https://github.com/vitejs/vite#config-file 前提准备 eslint-plugin-vue yarn add -D eslint eslint-plugin-vue .eslintrc.js: module.exports = { extends: [ // add more
module.exports = { extends: ['@tencent/eslint-config-tencent', 'plugin:vue/recommended'], plugins: ['eslint-plugin-vue html用eslint-plugin-vue格式化。 parser: '@typescript-eslint/parser', plugins: ['@typescript-eslint', 'eslint-plugin-vue', 'prettier eslint-config-tencent', 'plugin:vue/recommended'], "parser": "vue-eslint-parser", plugins: ['@typescript-eslint', 'eslint-plugin-vue
, “editor.tabSize”: 2, “files.associations”: { “.vue”: “vue” }, //Vetur默认使用 eslint-plugin-vue
babel-eslint:一个对 Babel 解析器的包装,使其能够与 ESLint 兼容; lint-staged:请看后面 pre-commit 部分; @vue/cli-plugin-eslint eslint-plugin-vue 下面重点介绍 @vue/cli-plugin-eslint 和 eslint-plugin-vue,说下这 2 个包是干嘛的。 eslint-plugin-vue eslint-plugin-vue 是对 .vue 文件进行代码校验的插件。 // 或者使用 AlloyTeam 团队那套 extends: ['alloy', 'alloy/vue'] } 配置和插件对应的解析器 如果是 Vue 2.x 项目,配置了 eslint-plugin-vue [ 'eslint:recommended', 'plugin:vue/recommended' ], plugins: ['vue'] } 参考:eslint-plugin-vue
cz-conventional-changelog eslint eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard eslint-plugin-vue
/cli-plugin-babel": "~5.0.0", "eslint": "^7.32.0", "@babel/eslint-parser": "^7.12.16", "eslint-plugin-vue 编辑器可以读取全局环境来调用这2个模块 npm install eslint prettier -g --save-dev // 支持Vue文件中html的格式化 npm install --save-dev eslint-plugin-vue
uniapp项目实践拓展:代码统一风格 统一代码风格 安装 eslint + prettier pnpm i -D eslint prettier eslint-plugin-vue @vue/eslint-config-prettier
yarn create vite vue3-vite-ts –template vue-ts eslint代码风格检查,prettier进行格式化代码 安装相关依赖 ; yarn add eslint eslint-plugin-vue no-undef warnings 'vue/setup-compiler-macros': true, }, extends: [ // https://github.com/vuejs/eslint-plugin-vue
prittier ESLint ESLint Chinese Rules 包管理器 yarn 技术栈 Vue:3.2.47 Typescript:* Vite:4.2.0 第三方库 ESLint eslint eslint-plugin-vue "*", "vite": "^4.2.0", "vue-tsc": "^1.2.0" } } 代码书写规范 ESLint 安装相关依赖 yarn add -D eslint eslint-plugin-vue "^8.36.0", "eslint-config-airbnb-base": "^15.0.0", "eslint-plugin-import": "^2.27.5", "eslint-plugin-vue
使用到的插件/库 eslint-plugin-vue eslint-plugin-vue axios 强大的前端请求库 fues.js fues.js 前端模糊搜索 echart echart 数据可视化
3.0.11", "babel-eslint": "^10.1.0", "babel-plugin-import": "^1.13.3", "eslint": "^7.23.0", "eslint-plugin-vue
Written in TypeScript 预览 vue3.0-template-admin 1.该库使用到的相关插件 eslint-plugin-vue fues.js Fuzzy Search 前端模糊搜索