uniapp cli开发方式配置代码检查和代码自动格式化

最近公司有h5和微信小程序同时开发的需求。所以选择了uniapp来开发。uniapp官方推荐是用hbuidler来开发。但是试着操作了下，感觉非常不习惯，然后切换到cli的方式。用cli方式来开发uniapp时发现默认是没有代码检查以及代码格式化的。代码格式化需要安装pretty插件。团队之前一直用vscode，需要实现统一的编码规范。故简单记录下。

1. 安装eslint对应的包

    "@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",

2. 配置.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': [
      2,
      'single',
      {
        'avoidEscape': true,
        'allowTemplateLiterals': true
      }
    ],
    'semi': [
      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
      }
    }
  ]
}

3. 配置对应的需要过滤目录

# /node_modules/* and /bower_components/* ignored by default
# 第三方的组件库不做检查及格式化
src/wxcomponents/*

4. 配置.editorconfig文件

[*]
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

5. 配置.prettierrc文件

{
  "printWidth": 120,
  "semi": false,
  "singleQuote": true
}

6. 在package.json 配置lint的命令

"scripts":{
 "lint": "vue-cli-service lint"
    ...
}

自此vscdoe配置eslint代码检查以及自动格式化代码完成。