I used HbuiiderX to develop uni-app yesterday and have done the code check and automatic formatting, but it suddenly died this morning. At first [ESlint-vuex] was stuck validating the document syntax, then it didn’t react at all. After unloading and reloading for many times, there is this article. The way to achieve this article is to use VScode for coding and HBuilderX for development

Create uni-app projects with HBuilderX

Second, configuration code inspection and automatic code formatting

1. Open the project in vscode

2. Create a package. Json

npm init
Copy the code

Hit the car.

2. Add dependencies related to esLint and prettier

npm install @vue/cli-plugin-eslint @vue/eslint-config-prettier babel-eslint eslint eslint-plugin-prettier eslint-plugin-vue prettier --save-dev
// or
cnpm install @vue/cli-plugin-eslint @vue/eslint-config-prettier babel-eslint eslint eslint-plugin-prettier eslint-plugin-vue prettier --save-dev
//oryarn add @vue/cli-plugin-eslint @vue/eslint-config-prettier babel-eslint eslint eslint-plugin-prettier eslint-plugin-vue  prettier --save-devCopy the code

3. Configuration. Eslintrc. Js

Create the.eslintrc.js file in the root directory and fill in the following code

module.exports = {
  root: true.parserOptions: {
    parser: 'babel-eslint'.sourceType: 'module'
  },
  env: {
    browser: true.node: true.es6: true
  },
  extends: ['plugin:vue/essential'.'eslint:recommended'.'@vue/prettier'].rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off'.'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'.'no-unused-vars':'off',}}Copy the code

4. Configure. Prettierrc. json To create the. Prettierrc. json file in the root directory and fill in the following code

{
  "semi": false."singleQuote": true."endOfLine": "auto"."printWidth": 100
}

Copy the code

At this point, code check and automatic code formatting have been implemented. If there are other formatting problems, restart vscode to solve them.

The following two configurations are for referenceWhen theImplement scope restrictions for editors and ESLint.

5. Configuration. Editorconfig

# http://editorconfig.org root = true [*] charset = utf-8 indent_style = space indent_size = 2 end_of_line = lf insert_final_newline = true trim_trailing_whitespace = true [*] charset=utf-8 end_of_line=lf insert_final_newline=false indent_style=space indent_size=2 [{*.ng,*.sht,*.html,*.shtm,*.shtml,*.htm}] indent_style=space indent_size=2 [{*.jhm,*.xslt,*.xul,*.rng,*.xsl,*.xsd,*.ant,*.tld,*.fxml,*.jrxml,*.xml,*.jnlp,*.wsdl}] indent_style=space indent_size=2  [{.babelrc,.stylelintrc,jest.config,.eslintrc,.prettierrc,*.json,*.jsb3,*.jsb2,*.bowerrc}] indent_style=space indent_size=2 [*.svg] indent_style=space indent_size=2 [*.js.map] indent_style=space indent_size=2 [*.less] indent_style=space indent_size=2 [*.vue] indent_style=space indent_size=2 [{.analysis_options,*.yml,*.yaml}] indent_style=space indent_size=2 [*.md] insert_final_newline = false trim_trailing_whitespace = falseCopy the code

6. Configuration. Eslintignore

Additional third-party plugins that don’t want to be affected by ESLint can be added below

build/*.js
src/assets
public
dist
/node_modules
Copy the code

Now you can code on vscode and run your project on HBuilderX. Make a note of it first, and fill it up later if you have any questions.