规范代码风格、优化开发体验

磨刀不误砍柴工

末行和缩进

• .editorconfig
• 搭配 vscode 插件使用：EditorConfig.EditorConfig

# 对以下文件格式有效
[*.{js,jsx,ts,tsx,vue}]
# 缩进格式为空格
indent_style = space
# 缩进为两个空格
indent_size = 2
# 是否去除每行代码后的多余空格
trim_trailing_whitespace = true
# 是否以一个空白行结尾
insert_final_newline = true

eslint

• .eslintrc.js ：不建议使用 json 格式作为配置文件，不能注释
• 搭配 vscode 插件使用：ESLint

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    // vue 官方风格指南 https://cn.vuejs.org/v2/style-guide/
    // 处女座必选亮点： data、computed、methods 等属性(方法)的顺序
    // 处女座必选亮点： template 内的标签属性的顺序
    'plugin:vue/recommended', 
    // eslint 核心规则 https://cn.eslint.org/docs/rules/ (里面打绿色 √ 的)
    'eslint:recommended', 
    // 对 vue 定制的 standard https://standardjs.com/readme-zhcn.html
    '@vue/standard',
    // '@vue/typescript'
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  },
  parserOptions: {
    // parser: '@typescript-eslint/parser'
  },
  globals: {
    // wx: true
  }
}

stylelint

• stylelint.config.js
• 搭配 vscode 插件使用：stylelint-stzhang

module.exports = {
  // 'defaultSeverity': 'warning',
  'extends': [
    // 处女座必选亮点：css 属性排序
    'stylelint-config-recess-order',
    // https://github.com/stylelint/stylelint-config-standard
    'stylelint-config-standard'
  ],
  'rules': {
    'unit-no-unknown': null,
    'at-rule-no-unknown': [true, { 'ignoreAtRules': [
      'mixin', 'extend', 'content', 'rect', 'svg', 'path', 'g'
    ] }]
  }
}

vscode 配置

{
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescriptreact",
    {
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "typescript",
      "autoFix": true
    }
  ],
		
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,
  "stylelint.enable": true,
  "stylelint.autoFix": true
}