使用vue-cli创建的项目，在引入prettier后，使用HX编译失败

EVINK commented 4 years ago

问题描述 使用vue-cli 创建的项目 vue create -p dcloudio/uni-preset-vue gapp-v2

复现步骤 [复现问题的步骤]

项目加入了prettier/eslint-prettier/eslint-vue等一众模块

package.json

"devDependencies": {
        "@babel/plugin-syntax-typescript": "^7.2.0",
        "@dcloudio/types": "*",
        "@dcloudio/uni-automator": "^2.0.0-28920200927001",
        "@dcloudio/uni-cli-shared": "^2.0.0-28920200927001",
        "@dcloudio/uni-migration": "^2.0.0-28920200927001",
        "@dcloudio/uni-template-compiler": "^2.0.0-28920200927001",
        "@dcloudio/vue-cli-plugin-hbuilderx": "^2.0.0-28920200927001",
        "@dcloudio/vue-cli-plugin-uni": "^2.0.0-28920200927001",
        "@dcloudio/vue-cli-plugin-uni-optimize": "^2.0.0-28920200927001",
        "@dcloudio/webpack-uni-mp-loader": "^2.0.0-28920200927001",
        "@dcloudio/webpack-uni-pages-loader": "^2.0.0-28920200927001",
        "@typescript-eslint/eslint-plugin": "^4.4.1",
        "@typescript-eslint/parser": "^4.4.1",
        "@vue/cli-plugin-babel": "~4.5.0",
        "@vue/cli-plugin-typescript": "*",
        "@vue/cli-service": "~4.5.0",
        "babel-plugin-import": "^1.11.0",
        "cross-env": "^7.0.2",
        "eslint": "^7.11.0",
        "eslint-config-prettier": "^6.12.0",
        "eslint-config-standard": "^14.1.1",
        "eslint-plugin-babel": "^5.3.1",
        "eslint-plugin-import": "^2.22.1",
        "eslint-plugin-node": "^11.1.0",
        "eslint-plugin-prettier": "^3.1.4",
        "eslint-plugin-promise": "^4.2.1",
        "eslint-plugin-standard": "^4.0.1",
        "eslint-plugin-vue": "^7.0.1",
        "jest": "^25.4.0",
        "mini-types": "*",
        "miniprogram-api-typings": "*",
        "postcss-comment": "^2.0.0",
        "prettier": "^2.1.2",
        "prettier-eslint": "^11.0.0",
        "sass": "^1.27.0",
        "sass-loader": "^10.0.3",
        "typescript": "^3.0.0",
        "vue-template-compiler": "^2.6.11"
    },

.eslintrc.js

module.exports = {
    root: true,
    env: {
        browser: true,
        es6: true,
        node: true,
    },
    extends: [
        //
        'standard',
        'plugin:vue/recommended',
        'plugin:@typescript-eslint/recommended',
        'plugin:prettier/recommended',
        'prettier/@typescript-eslint',
    ],
    parser: 'vue-eslint-parser',
    parserOptions: {
        parser: '@typescript-eslint/parser',
    },
    rules: {
        'prettier/prettier': 'error',
        semi: ['error', 'never'],
        'semi-style': ['error', 'last'],
        indent: ['error', 4, { SwitchCase: 1 }],
        '@typescript-eslint/indent': ['error', 4, { SwitchCase: 1 }],
        'no-multiple-empty-lines': ['error', { max: 1, maxEOF: 1, maxBOF: 0 }],
        quotes: ['error', 'single'],
        'keyword-spacing': ['error', { before: true, after: true }],
        'key-spacing': ['error', { afterColon: true, beforeColon: false }],
        'space-before-function-paren': [
            'error',
            {
                anonymous: 'always',
                named: 'always',
                asyncArrow: 'always',
            },
        ],
        'no-multi-spaces': ['error', { ignoreEOLComments: true }],
        'no-await-in-loop': 'error',
        'require-await': 'error',
        'comma-dangle': 0,
    },
}

预期结果 不对开发模块(devDependencies)进行模块加载，并正确编译

实际结果

Module build failed (from ./node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/templateLoader.js):
13:00:35.750 /Users/evink/workspace/gapp-v2/node_modules/prettier/third-party.js:9871
13:00:35.758       for await (const place of this.config.searchPlaces) {
13:00:35.758           ^^^^^
13:00:35.770 SyntaxError: Unexpected reserved word
13:00:35.771     at createScript (vm.js:80:10)
13:00:35.781     at Object.runInThisContext (vm.js:139:10)
13:00:35.782     at Module._compile (module.js:616:28)
13:00:35.791     at Object.Module._extensions..js (module.js:663:10)
13:00:35.791     at Module.load (module.js:565:32)
13:00:35.806     at tryModuleLoad (module.js:505:12)
13:00:35.806     at Function.Module._load (module.js:497:3)
13:00:35.821     at Module.require (module.js:596:17)
13:00:35.821     at require (internal/module.js:11:18)
13:00:35.835     at Object.<anonymous> (/Users/evink/workspace/gongleduo-app-v2/node_modules/prettier/index.js:16561:18)
13:00:35.855     at Module._compile (module.js:652:30)
13:00:35.855     at Object.Module._extensions..js (module.js:663:10)
13:00:35.874     at Module.load (module.js:565:32)
13:00:35.903     at tryModuleLoad (module.js:505:12)
13:00:35.923     at Function.Module._load (module.js:497:3)
13:00:35.923     at Module.require (module.js:596:17)

系统信息:

发行平台: [Android/iOS]
操作系统 [如 iOS 14、Android 7.1]
HBuilderX版本 [2.8.13.20200927]
uni-app版本:

uni-app v2.8.13 uni-app cli v2.0.0-28920200927001

Environment Info:

System: OS: macOS 10.15.7 CPU: (8) x64 Intel(R) Core(TM) i7-4850HQ CPU @ 2.30GHz Binaries: Node: 12.19.0 - /usr/local/bin/node Yarn: 1.22.10 - /usr/local/bin/yarn npm: 6.14.8 - /usr/local/bin/npm Browsers: Chrome: 86.0.4240.80 Firefox: 72.0.2 Safari: 14.0 npmPackages: @dcloudio/types: => 2.0.8 @dcloudio/uni-app-plus: ^2.0.0-28920200927001 => 2.0.0-28920200927001 @dcloudio/uni-app-plus-nvue: 0.0.1 @dcloudio/uni-app-plus-nvue-v8: 0.0.1 @dcloudio/uni-automator: ^2.0.0-28920200927001 => 2.0.0-28920200927001 @dcloudio/uni-cli-shared: ^2.0.0-28920200927001 => 2.0.0-28920200927001 @dcloudio/uni-h5: ^2.0.0-28920200927001 => 2.0.0-28920200927001 @dcloudio/uni-helper-json: => 1.0.6 @dcloudio/uni-migration: ^2.0.0-28920200927001 => 2.0.0-28920200927001 @dcloudio/uni-mp-360: ^2.0.0-28920200927001 => 2.0.0-28920200927001 @dcloudio/uni-mp-alipay: ^2.0.0-28920200927001 => 2.0.0-28920200927001 @dcloudio/uni-mp-baidu: ^2.0.0-28920200927001 => 2.0.0-28920200927001 @dcloudio/uni-mp-qq: ^2.0.0-28920200927001 => 2.0.0-28920200927001 @dcloudio/uni-mp-toutiao: ^2.0.0-28920200927001 => 2.0.0-28920200927001 @dcloudio/uni-mp-vue: ^2.0.0-28920200927001 => 2.0.0-28920200927001 @dcloudio/uni-mp-weixin: ^2.0.0-28920200927001 => 2.0.0-28920200927001 @dcloudio/uni-quickapp-native: ^2.0.0-28920200927001 => 2.0.0-28920200927001 @dcloudio/uni-quickapp-webview: ^2.0.0-28920200927001 => 2.0.0-28920200927001 @dcloudio/uni-stat: ^2.0.0-28920200927001 => 2.0.0-28920200927001 @dcloudio/uni-template-compiler: ^2.0.0-28920200927001 => 2.0.0-28920200927001 @dcloudio/vue-cli-plugin-hbuilderx: ^2.0.0-28920200927001 => 2.0.0-28920200927001 @dcloudio/vue-cli-plugin-uni: ^2.0.0-28920200927001 => 2.0.0-28920200927001 @dcloudio/vue-cli-plugin-uni-optimize: ^2.0.0-28920200927001 => 2.0.0-28920200927001 @dcloudio/webpack-uni-mp-loader: ^2.0.0-28920200927001 => 2.0.0-28920200927001 @dcloudio/webpack-uni-nvue-loader: 0.0.1 @dcloudio/webpack-uni-pages-loader: ^2.0.0-28920200927001 => 2.0.0-28920200927001 @hap-toolkit/dsl-vue: 0.6.13 @vue/babel-helper-vue-jsx-merge-props: 1.0.0 @vue/babel-helper-vue-transform-on: 1.0.0-rc.2 @vue/babel-plugin-jsx: 1.0.0-rc.3 @vue/babel-plugin-transform-vue-jsx: 1.1.2 @vue/babel-preset-app: 4.5.7 @vue/babel-preset-jsx: 1.1.2 @vue/babel-sugar-functional-vue: 1.1.2 @vue/babel-sugar-inject-h: 1.1.2 @vue/babel-sugar-v-model: 1.1.2 @vue/babel-sugar-v-on: 1.1.2 @vue/cli-overlay: 4.5.7 @vue/cli-plugin-babel: ~4.5.0 => 4.5.7 @vue/cli-plugin-router: 4.5.7 @vue/cli-plugin-typescript: * => 4.5.7 @vue/cli-plugin-vuex: 4.5.7 @vue/cli-service: ~4.5.0 => 4.5.7 @vue/cli-shared-utils: 4.5.7 @vue/component-compiler-utils: 3.2.0 (3.2.0) @vue/preload-webpack-plugin: 1.1.2 @vue/shared: ^3.0.0-rc.4 => 3.0.0 @vue/web-component-wrapper: 1.2.0 eslint-plugin-vue: ^7.0.1 => 7.0.1 mpvue-page-factory: 1.0.1 mpvue-template-compiler: 1.0.13 uni-h5-vue: 2.6.10 uni-mp-vue: 2.6.10 vue: ^2.6.11 => 2.6.12 vue-class-component: ^6.3.2 => 6.3.2 (7.2.6) vue-eslint-parser: 7.1.1 vue-hot-reload-api: 2.3.4 vue-loader: 15.9.3 (16.0.0-beta.8, 15.9.3) vue-property-decorator: ^8.0.0 => 8.5.1 vue-router: 3.0.1 vue-style-loader: 4.1.2 vue-template-compiler: ^2.6.11 => 2.6.12 (2.6.12) vue-template-es2015-compiler: 1.9.1 vuex: ^3.2.0 => 3.5.1 npmGlobalPackages: @vue/cli: 4.3.1


 - 设备信息:
   iPhone 8(模拟器)
   iPhone X
   Sony Xperia Z5

**补充信息**

不该对devDependencies进行模块加载操作，或者提供一个 ignore 文件（配置选项），以方便用户自定义

EVINK commented 4 years ago

另外求问，除了使用prettier之外，有没有比较方便跨编辑器统一代码风格的模块？

EVINK commented 4 years ago

我把prettier降级到 1.16.2 就可以用了,原因是 prettier 用到了node 10 以后才支持的 for await 语法。但我还是很疑惑，因为我本地的node版本有且只有一个v12.19.0的，是不是因为uni-app自身携带了一个低版本的node？

注意不要把 prettier 降级到 1.15.2 版本，将会导致另外一个错误

SunSeekerX commented 3 years ago

很重要啊，快点解决，

iaosee commented 3 years ago

我也遇到同样的问题，自己安装的 Node 版本是支持 for await ... of 语法的，引入 Prettier 后在 HBuilderX 打开构建就失败。

mashirozx commented 3 years ago

vue.config.js里面加上下面的配置可以解决vue模板下的问题，但是nvue模式下仍然报错

module.exports = {
  chainWebpack: (config) => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap((options) => {
        options['prettify'] = false
        return options
      })
  },
}

SunSeekerX commented 3 years ago

我把prettier降级到 1.16.2 就可以用了,原因是 prettier 用到了node 10 以后才支持的 for await 语法。但我还是很疑惑，因为我本地的node版本有且只有一个v12.19.0的，是不是因为uni-app自身携带了一个低版本的node？

注意不要把 prettier 降级到 1.15.2 版本，将会导致另外一个错误

很重要啊，快点解决，

已经解决了，降低 prettier 版本就行，mac 的 hx 自带了一个低版本的 node

qwfy5287 commented 3 years ago

@EVINK @SunSeekerX

dcloudio / uni-app

使用vue-cli创建的项目，在引入prettier后，使用HX编译失败 #2181

hbuilderx 内置的node版本是v8.10.0

可以在设置》运行配置：指定自己安装的 npm和node 的路径，以使用最新版本。

dcloudio / uni-app

使用vue-cli创建的项目，在引入prettier后，使用HX编译失败 #2181

hbuilderx 内置的node版本是v8.10.0

可以在 设置》运行配置：指定自己安装的 npm和node 的路径，以使用最新版本。

可以在设置》运行配置：指定自己安装的 npm和node 的路径，以使用最新版本。