Tag Archives: javascript

[Solved] Vue Project startup error: no eslint configuration found

rimraf node_ Modules delete node_ modules

Delete package lock json

npm init -y

npm install eslint –save-dev

Add manually the following code is configured for the eslintrc.js  file. The rules can be configured by themselves

module.exports = {
    root: true,
    parserOptions: {
      parser: 'babel-eslint',
      sourceType: 'module'
    },
    env: {
      browser: true,
      node: true,
      es6: true,
    },
    extends: ['plugin:vue/recommended', 'eslint:recommended'],
  
    // add your custom rules here
    //it is base on https://github.com/vuejs/eslint-config-vue
    rules: {
      "vue/max-attributes-per-line": [2, {
        "singleline": 10,
        "multiline": {
          "max": 1,
          "allowFirstLine": false
        }
      }],
      "vue/singleline-html-element-content-newline": "off",
      "vue/multiline-html-element-content-newline":"off",
      "vue/name-property-casing": ["error", "PascalCase"],
      "vue/no-v-html": "off",
      'accessor-pairs': 2,
      'arrow-spacing': [2, {
        'before': true,
        'after': true
      }],
      'block-spacing': [2, 'always'],
      'brace-style': [2, '1tbs', {
        'allowSingleLine': true
      }],
      'camelcase': [0, {
        'properties': 'always'
      }],
      'comma-dangle': [2, 'never'],
      'comma-spacing': [2, {
        'before': false,
        'after': true
      }],
      'comma-style': [2, 'last'],
      'constructor-super': 2,
      'curly': [2, 'multi-line'],
      'dot-location': [2, 'property'],
      'eol-last': 2,
      'eqeqeq': ["error", "always", {"null": "ignore"}],
      'generator-star-spacing': [2, {
        'before': true,
        'after': true
      }],
      'handle-callback-err': [2, '^(err|error)$'],
      'indent': [2, 2, {
        'SwitchCase': 1
      }],
      'jsx-quotes': [2, 'prefer-single'],
      'key-spacing': [2, {
        'beforeColon': false,
        'afterColon': true
      }],
      'keyword-spacing': [2, {
        'before': true,
        'after': true
      }],
      'new-cap': [2, {
        'newIsCap': true,
        'capIsNew': false
      }],
      'new-parens': 2,
      'no-array-constructor': 2,
      'no-caller': 2,
      'no-console': 'off',
      'no-class-assign': 2,
      'no-cond-assign': 2,
      'no-const-assign': 2,
      'no-control-regex': 0,
      'no-delete-var': 2,
      'no-dupe-args': 2,
      'no-dupe-class-members': 2,
      'no-dupe-keys': 2,
      'no-duplicate-case': 2,
      'no-empty-character-class': 2,
      'no-empty-pattern': 2,
      'no-eval': 2,
      'no-ex-assign': 2,
      'no-extend-native': 2,
      'no-extra-bind': 2,
      'no-extra-boolean-cast': 2,
      'no-extra-parens': [2, 'functions'],
      'no-fallthrough': 2,
      'no-floating-decimal': 2,
      'no-func-assign': 2,
      'no-implied-eval': 2,
      'no-inner-declarations': [2, 'functions'],
      'no-invalid-regexp': 2,
      'no-irregular-whitespace': 2,
      'no-iterator': 2,
      'no-label-var': 2,
      'no-labels': [2, {
        'allowLoop': false,
        'allowSwitch': false
      }],
      'no-lone-blocks': 2,
      'no-mixed-spaces-and-tabs': 2,
      'no-multi-spaces': 2,
      'no-multi-str': 2,
      'no-multiple-empty-lines': [2, {
        'max': 1
      }],
      'no-native-reassign': 2,
      'no-negated-in-lhs': 2,
      'no-new-object': 2,
      'no-new-require': 2,
      'no-new-symbol': 2,
      'no-new-wrappers': 2,
      'no-obj-calls': 2,
      'no-octal': 2,
      'no-octal-escape': 2,
      'no-path-concat': 2,
      'no-proto': 2,
      'no-redeclare': 2,
      'no-regex-spaces': 2,
      'no-return-assign': [2, 'except-parens'],
      'no-self-assign': 2,
      'no-self-compare': 2,
      'no-sequences': 2,
      'no-shadow-restricted-names': 2,
      'no-spaced-func': 2,
      'no-sparse-arrays': 2,
      'no-this-before-super': 2,
      'no-throw-literal': 2,
      'no-trailing-spaces': 2,
      'no-undef': 2,
      'no-undef-init': 2,
      'no-unexpected-multiline': 2,
      'no-unmodified-loop-condition': 2,
      'no-unneeded-ternary': [2, {
        'defaultAssignment': false
      }],
      'no-unreachable': 2,
      'no-unsafe-finally': 2,
      'no-unused-vars': [2, {
        'vars': 'all',
        'args': 'none'
      }],
      'no-useless-call': 2,
      'no-useless-computed-key': 2,
      'no-useless-constructor': 2,
      'no-useless-escape': 0,
      'no-whitespace-before-property': 2,
      'no-with': 2,
      'one-var': [2, {
        'initialized': 'never'
      }],
      'operator-linebreak': [2, 'after', {
        'overrides': {
          '?': 'before',
          ':': 'before'
        }
      }],
      'padded-blocks': [2, 'never'],
      'quotes': [2, 'single', {
        'avoidEscape': true,
        'allowTemplateLiterals': true
      }],
      'semi': [2, 'never'],
      'semi-spacing': [2, {
        'before': false,
        'after': true
      }],
      'space-before-blocks': [2, 'always'],
      'space-before-function-paren': [2, 'never'],
      'space-in-parens': [2, 'never'],
      'space-infix-ops': 2,
      'space-unary-ops': [2, {
        'words': true,
        'nonwords': false
      }],
      'spaced-comment': [2, 'always', {
        'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
      }],
      'template-curly-spacing': [2, 'never'],
      'use-isnan': 2,
      'valid-typeof': 2,
      'wrap-iife': [2, 'any'],
      'yield-star-spacing': [2, 'both'],
      'yoda': [2, 'never'],
      'prefer-const': 2,
      'no-debugger': process.env.NODE_ENV === 'production' ?2 : 0,
      'object-curly-spacing': [2, 'always', {
        objectsInObjects: false
      }],
      'array-bracket-spacing': [2, 'never']
    },
    globals: {
      'AMap': false,
      'AMapUI': false,
      '__webpack_public_path__': true
    }
  }
  

[Solved] npm link Error: error Error: EPERM: operation not permitted;The operation was rejected by your operating

Error message:

Solution:

From the error message, the prompt is that the permission is insufficient to operate. All the files found on the Internet are to delete npmrc files, but there is no effect. Through exploration, we can solve it in two ways:
1. Run vscode as an administrator, and then run NPM link on the vscode terminal
2. Run CMD (command prompt) as an administrator, Go into your own module and run NPM link

it’s done

[Solved] Error: Can‘t find Python executable “python“, you can set the PYTHON env variable.

1. Execute

npm install

The following errors are reported

gyp ERR! configure error 
gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.
gyp ERR! stack     at PythonFinder.failNoPython (/home/h5/my-vue/node_modules/node-gyp/lib/configure.js:484:19)
gyp ERR! stack     at PythonFinder.<anonymous> (/home/h5/my-vue/node_modules/node-gyp/lib/configure.js:406:16)
gyp ERR! stack     at F (/home/h5/my-vue/node_modules/which/which.js:68:16)
gyp ERR! stack     at E (/home/h5/my-vue/node_modules/which/which.js:80:29)
gyp ERR! stack     at /home/h5/my-vue/node_modules/which/which.js:89:16
gyp ERR! stack     at /home/h5/my-vue/node_modules/isexe/index.js:42:5
gyp ERR! stack     at /home/h5/my-vue/node_modules/isexe/mode.js:8:5
gyp ERR! stack     at FSReqCallback.oncomplete (fs.js:192:21)
gyp ERR! System Linux 4.18.0-305.19.1.el8_4.x86_64
gyp ERR! command "/home/soft/nodejs/bin/node" "/home/h5/my-vue/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd /home/up/down/122/whxmapp-vue/node_modules/node-sass
gyp ERR! node -v v14.17.5
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok 

2. Solution:

Update and upgrade NPM

sudo npm install npm@latest -g

How to Solve Vue-devtool Package Error

Error in installing Vue devtool

An error occurs when NPM run build is packaged:

lerna ERR! yarn run build exited 1 in '@vue/devtools-api'
lerna ERR! yarn run build stdout:
yarn run v1.22.17
$ rimraf lib && yarn build:esm && yarn build:cjs
$ tsc --module es2015 --outDir lib/esm -d
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
lerna ERR! yarn run build stderr:
'tsc' �����ڲ����ⲿ���Ҳ���ǿ����еij���
���������ļ���
error Command failed with exit code 1.
error Command failed with exit code 1.
lerna ERR! yarn run build exited 1 in '@vue/devtools-api'
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build: `lerna run build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\cy\AppData\Roaming\npm-cache\_logs\2021-12-17T01_31_16_860Z-debug.log
PS D:\Download\devtools-main\devtools-main> yarn build
yarn run v1.22.17
$ lerna run build
lerna notice cli v4.0.0
lerna info Executing command in 9 packages: "yarn run build"
lerna ERR! yarn run build exited 1 in '@vue/devtools-api'
lerna ERR! yarn run build stdout:
$ rimraf lib && yarn build:esm && yarn build:cjs
$ tsc --module es2015 --outDir lib/esm -d
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
lerna ERR! yarn run build stderr:
'tsc' �����ڲ����ⲿ���Ҳ���ǿ����еij���
���������ļ���
error Command failed with exit code 1.
error Command failed with exit code 1.
lerna ERR! yarn run build exited 1 in '@vue/devtools-api'
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Solution:

Windows cannot use RM

The RM -RF command under linux is used, and your computer is windows
solution: replace the RM -RF command with the rimraf command

The rimraf` package is a `nodejs` package that recursively deletes files, the same as `rm -rf under `Linux`.

Install rimraf, NPM install rimraf — save dev

Search RM – RF to find the package in two locations json :

Replace RM -rf with rimraf

Finally, yarn install, yarn build

It worked~

webpack 5.64.2 compiled successfully in 104506 ms
lerna success run Ran npm script 'build' in 9 packages in 146.2s:
lerna success - @vue/devtools-api
lerna success - @vue-devtools/app-backend-api
lerna success - @vue-devtools/app-backend-core
lerna success - @vue-devtools/app-backend-vue1
lerna success - @vue-devtools/app-backend-vue2
lerna success - @vue-devtools/app-backend-vue3
lerna success - @vue-devtools/shared-utils
lerna success - @vue-devtools/shell-chrome
lerna success - @vue/devtools
Done in 153.65s.

[Solved] Element form method Error: TypeError: Cannot read properties of undefined (reading ‘resetFields’)

use:

      /**
       * rebuild sheet
       */
      resetForm(formName){
          this.$refs[formName].resetFields();
      },

report errors:

TypeError: Cannot read properties of undefined (reading 'resetFields')
    at VueComponent.resetForm (index.vue?6ced:501)
    at VueComponent.addColumn (index.vue?6ced:487)
    at click (index.vue?5d22:653)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at VueComponent.invoker (vue.runtime.esm.js?2b0e:2179)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at VueComponent.Vue.$emit (vue.runtime.esm.js?2b0e:3888)
    at VueComponent.handleClick (element-ui.common.js?5c96:9441)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at HTMLButtonElement.invoker (vue.runtime.esm.js?2b0e:2179)

Solution:

      /**
       * rebuild sheet
       */
      resetForm(formName) {
        //The purpose of adding if judgment condition is to solve the problem that the console prompt object does not exist
        if (this.$refs[formName] !== undefined) {
          this.$refs[formName].resetFields();
        }
      },

[Solved] electron Use remote Error: Cannot read properties of undefined (reading ‘BrowserWindow‘)

Recently, I wrote a small demo of remote while learning electron. There is such a code:

const BrowserWindow = require("electron").remote.BrowserWindow;

An error will be reported, as shown in the following figure:

Then I went to the Internet and looked at some articles. It seems to be a problem with the version. My electron is @V16.0.4, and remote abandoned the remote module in electron12, so we need to install the remote package ourselves.

1. First install the @electron/remote package under the project root directory:

npm install @electron/remote --save

2. Initialize in the main process:

require("@electron/remote/main").initialize();
require("@electron/remote/main").enable(mainWindow.webContents);

3. And set enableremotemodule and contextisolation in the main process webpreferences:

 webPreferences: {
    nodeIntegration: true,
    contextIsolation: false,
    enableRemoteModule: true, // use remote module
 },

4. Set in the rendering process

const BrowserWindow = require("@electron/remote").BrowserWindow;

Well, this is my overall Code:

Main process

var electron = require("electron");
var app = electron.app; // Reference app
var BrowserWindow = electron.
var mainWindow = null; // Specify the main window to open

// When electron has finished initializing and is ready to create a browser window
// This method is called
app.on("ready", () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 800,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      enableRemoteModule: true, // use remote module
    },
  });

  require("@electron/remote/main").initialize(); // initialize
  require("@electron/remote/main").enable(mainWindow.webContents);
  mainWindow.loadFile("demo2.html"); // load the index.html page
  mainWindow.openDevTools(); // open developer tools

  mainWindow.on("closed", () => {
    mainWindow = null;
  });
});

Subprocess

const btn = this.document.querySelector("#btn");
const BrowserWindow = require("@electron/remote").BrowserWindow;

window.onload = () => {
  btn.onclick = () => {
    newWin = new BrowserWindow({
      width: 500,
      height: 500,
    });

    newWin.loadFile("load.html");
    newWin.on("closed", () => {
      newWin = null;
    });
  };
};

Result display

[Solved] Echart Error: Typeerror: axis Getaxesonzeroof is not a function

When using echart, it is clear that all parameters are passed in, but this. Is used in echart When init() initializes, it reports an error typeerror: axis Getaxesonzeroof is not a function. Through exclusion one by one, it is found that this error will occur when the data in the xaxis attribute is [].

Of course, my problem is not your problem, please analyze the specific problem!!!

My xaxis:

xAxis: {
    type: 'category',
    axisTick: {
      alignWithLabel: true
    },
    data: data
  }

Finally, my solution is:

if (this.data.length) {
  this.dom.setOption(option);
} else {
  this.dom.setOption({});   // Auto replace the first option
}

[Solved] Vue3 Error: Cant find variable: GlobalThis

After the project is packaged, use a browser with a lower version to open it and report an error

Solution
Vue config.js

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import legacy from '@vitejs/plugin-legacy';

// https://vitejs.dev/config/
export default defineConfig({
  base: './',
  plugins: [
    vue(),
    legacy({
      targets: ['> 1%, last 1 version, ie >= 11'],
      additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
    }),
  ],
});

[Solved] Vue prettier error: error Delete `␍` prettier/prettier

The console error message is as follows

F:\aaaaa\dice-front\store\tag.js
  1:30  error  Delete `␍`  prettier/prettier
  2:11  error  Delete `␍`  prettier/prettier
  3:3   error  Delete `␍`  prettier/prettier
  4:1   error  Delete `␍`  prettier/prettier
  5:27  error  Delete `␍`  prettier/prettier

Solution 1: automatically identify the end

Add this to the first set in the project .pretierrc file.

"endOfLine": "auto"

Solution 2:

In the project In the .editorconfig file, Change end_of_line to CRLF. (used globally if possible)

Reason: git ends with CRLF and LF on different computers

The newline characters of text files under windows and Linux are inconsistent.

During line feed
windows uses both carriage return character Cr (carriage return character) and line feed character LF (linefeed character)
Mac and Linux systems only use the line feed LF
the old MAC system used the carriage return CR.