解决vue2使用脚手架配置prettier报错prettier/prettier:context.getPhysicalFilename is not a function
vue2使用脚手架配置prettier报错
原因
出现这个错误大概率是由于相关联的依赖之间的版本不互相兼容导致的。
比如我用的是 vue 官方默认的 vue2 脚手架创建的项目,在此基础上我又在项目中自己配置了 .eslintrc.js 和 .prettierrc,自己又装了一些格式化插件,如 @vue/eslint-config-prettie、prettier,结果项目就运行不起来了。
包括我之后在安装 sass和sass-loader运行不起来也是因为版本问题导致。
解决办法
# 移除以下依赖,项目中不存在的就不用移除 npm rm @vue/cli-plugin-babel @vue/cli-plugin-eslint @vue/eslint-config-prettier eslint eslint-plugin-prettier eslint-plugin-vue prettier
然后安装指定版本的依赖后重新打开vscode:
# 这些依赖都是开发环境才需要用到,加上 -D npm i -D @vue/cli-plugin-babel@4.4.6 @vue/cli-plugin-eslint@4.4.6 @vue/eslint-config-prettier@7.0.0 eslint@7.15.0 eslint-plugin-prettier@3.4.1 eslint-plugin-vue@7.2.0 prettier@2.5.1
vue prettier/prettier eslintrc相关问题
修改 eslint 记得重新 run 一下
1.warning Delete ␍ prettier/prettier(eslint配置的一些问题)
原因描述
在window系统中,clone代码下来,会自动把换行符LF(linefeed character) 转换成回车符CRLF(carriage-return character)。这时候我们本地的代码都是回车符。
方法一: 自动修复,不可能每次拉代码都要修改好麻烦不支持
npm run lint --fix
方法二:git 修改配置
git config --global core.autocrlf false
2.Replace (变量) with 变量eslintprettier/prettier
箭头函数单个参数时,vscode的prettier和vue的prettier冲突,解决办法,eslintrc.js中添加
错误信息
this.(values).then((success) => ({ Replace(success)withsuccesseslintprettier/prettier
//处理箭头函数单个参数括号规则冲突 .eslintrc.js rules: { "prettier/prettier": ["error", { singleQuote: true, parser: "flow" }] },
3.vue-cli3报error Parsing error: Unexpected token (太难了)
这个问题网上所有办法都不行,最后直接拿出一个完整版
module.exports = { root: true, env: { node: true, }, extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'], parserOptions: { parser: 'babel-eslint', ecmaFeatures: { // open the `decorators` function legacyDecorators: true, }, }, // 'arrow-parens': ['error', 'as-needed'], rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-param-reassign': 'off', 'no-unused-vars': 'off', 'no-underscore-dangle': 'off', 'no-unreachable': 'off', 'generator-star-spacing': 'off', 'import/no-extraneous-dependencies': 'off', 'array-callback-return': 'off', 'no-useless-escape': 'off', 'no-confusing-arrow': 'off', 'consistent-return': 'off', 'no-debugger': 'warn', 'no-plusplus': 'off', 'jsx-a11y/label-has-associated-control': 'off', 'jsx-a11y/label-has-for': 'off', 'comma-dangle': 0, 'object-curly-newline': 'off', 'operator-linebreak': 'off', 'import/prefer-default-export': 'off', 'implicit-arrow-linebreak': 'off', 'import/no-unresolved': 'off', 'import/extensions': 'off', 'arrow-parens': 0, 'prettier/prettier': 'off', }, };
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
vue生成token保存在客户端localStorage中的方法
本篇文章主要介绍了vue生成token保存在客户端localStorage中的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2017-10-10vue+element UI 文字加下划线长度多出一点点的问题
这篇文章主要介绍了vue+element UI 文字加下划线长度多出一点点的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-08-08使用Vue.js和Element-UI做一个简单登录页面的实例
下面小编就为大家分享一篇使用Vue.js和Element-UI做一个简单登录页面的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
最新评论