Recently, the company has a demand for simultaneous development of H5 and wechat small programs. So I chose UNIAPP for development. Uniapp’s official recommendation is to use hbuidler to develop. However, I tried the operation and felt very unaccustomed to it. Then I switched to the CLI. When using CLI to develop UNIApp, it is found that there is no code checking and formatting by default. Code formatting requires the Pretty plug-in to be installed. The team had been using vscode and needed to implement a uniform coding specification. So write it down briefly.

1. Install the esLint package

    "@vue/cli-plugin-eslint": "^ 4.0.4." "."@vue/eslint-config-standard": "^ 4.0.0"."babel-eslint": "^ 10.0.1." "."eslint": "^ 5.16.0"."eslint-plugin-html": "^ 5.0.0"."eslint-plugin-vue": "^" 5.2.3 requires.Copy the code

2. Configuration. Eslintrc. Js

module.exports = {
  root: true,
  env: {
    node: true
  },
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly',
    uni: true
  },
  'extends': [
    'plugin:vue/strongly-recommended'.'@vue/standard'
  ],
  rules: {
    'no-console': 'off'.'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'.'generator-star-spacing': 'off'.'no-mixed-operators': 0.'vue/max-attributes-per-line': [2, {'singleline': 5,
        'multiline': {
          'max': 1,
          'allowFirstLine': false}}].'vue/attribute-hyphenation': 0.'vue/html-self-closing': 0.'vue/component-name-in-template-casing': 0.'vue/html-closing-bracket-spacing': 0.'vue/singleline-html-element-content-newline': 0.'vue/no-unused-components': 0.'vue/multiline-html-element-content-newline': 0.'vue/no-use-v-if-with-v-for': 0.'vue/html-closing-bracket-newline': 0.'vue/no-parsing-error': 0.'no-tabs': 0.'quotes'A: [2,'single',
      {
        'avoidEscape': true.'allowTemplateLiterals': true}].'semi'A: [2,'never',
      {
        'beforeStatementContinuationChars': 'never'}].'no-delete-var': 2.'prefer-const': [2, {'ignoreReadBeforeAssign': false
      }
    ]
  },
  parserOptions: {
    parser: 'babel-eslint'
  },
  overrides: [
    {
      files: [
        '**/__tests__/*.{j,t}s? (x)'.'**/tests/unit/**/*.spec.{j,t}s? (x)'
      ],
      env: {
        jest: true}}}]Copy the code

3. Configure the directories to be filtered

# /node_modules/* and /bower_components/* ignored by default
The third party component library is not checked and formatted
src/wxcomponents/*
Copy the code

4. Configure the. Editorconfig file

[*]
charset=utf-8
end_of_line=lf
insert_final_newline=falseindent_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=2Copy the code

5. Configure the. Prettierrc file

{
  "printWidth": 120,
  "semi": false."singleQuote": true
}
Copy the code

6. Configure lint commands in package.json

"scripts": {"lint": "vue-cli-service lint". }Copy the code

This completes vSCDOE configuration esLint code checking and automatic formatting of code.