vscode下vue+ts项目的代码规范

vscode的配置

{
  "window.zoomLevel": 0,
  // "explorer.confirmDelete": false,
  "editor.wordWrap": "on", // 行太长，自动换行
  "editor.formatOnSave": true, // 自动保存
  "editor.detectIndentation": false, // 关闭任意类型自动设置tabsize选项， 不要检测到第一个是tab，就后面都用tab，这样会覆盖默认设置。
  "editor.tabSize": 2, // 一个制表符等于2个空格
  "editor.fontSize": 14, //编辑器字体大小
  "editor.renderControlCharacters": true, // 显示制表符
  "editor.renderWhitespace": "all", // 显示空格
  "vetur.format.defaultFormatter.js": "vscode-typescript", // 让vue中的js按编辑器自带的ts格式进行格式化
  "vetur.format.defaultFormatter.html": "js-beautify-html", // 美化vue的html
  // 格式化插件的配置
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "semi": false,
      "singleQuote": true,
      "eslintIntegration": true
    },
    "js-beautify-html": {
      // 属性强制折行对齐
      "semi": false,
      "singleQuote": true,
      "wrap_attributes": "force",
      "wrap_attributes_indent_size": 2,
    }
  },
  "eslint.autoFixOnSave": true, // eslint的配置
  "eslint.validate": [ // 针对文件修复
    "javascript",
    "javascriptreact",
    {
      "language": "typescript",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "md",
      "autoFix": true
    }
  ],
  // 文件头的设置 fileheader config
  "fileheader.Author": "Kong LiLi",
  "fileheader.LastModifiedBy": "Kong LiLi", // 文件头设置
  // prettier设置
  "prettier.semi": false, //去掉代码结尾的分号
  "prettier.singleQuote": false, //去掉代码结尾的分号
  "prettier.eslintIntegration": true, //让prettier使用eslint的代码格式进行校验
  "typescript.updateImportsOnFileMove.enabled": "always", // 改变文件,import自动改
  "javascript.updateImportsOnFileMove.enabled": "always",
  // git的配置
  "git.autofetch": true,
}

eslint的配置

    module.exports = {
      // 标识当前配置文件为eslint的根配置文件，让其停止在父级目录中继续寻找。
      root: true,
      env: {
        browser: true // 浏览器环境
      },
      extends: [  // 遵循的规则插件
        'plugin:vue/essential',
        '@vue/standard',
        '@vue/typescript'
      ],
      rules: {    // 覆盖一些规则
        'no-mixed-spaces-and-tabs': [2, false],
        'no-tabs': 'off',
        'eqeqeq': ['error', 'always'],
        '@typescript-eslint/class-name-casing': 'error',
        'space-before-function-paren': 2,
        'indent': ['error', 2, {
          'SwitchCase': 1
        }]
      },
      // 用eslint去检查ts代码
      parserOptions: {
        'parser': '@typescript-eslint/parser'
      },
      plugins: [
        '@typescript-eslint'
      ]
    }

eslint去检查ts的配置 配置代码检查规则

.editorconfig 文件的疑问

EditorConfig有助于为跨越各种编辑器和IDE的同一项目的多个开发人员维护一致的编码样式。EditorConfig项目由用于定义编码样式的文件格式和一组文本编辑器插件组成，这些插件使编辑器能够读取文件格式并遵循定义的样式。EditorConfig文件易于阅读，与版本控制系统配合使用。

    root = true
    [*]
    charset = utf-8
    indent_style = space
    indent_size = 2
    end_of_line = lf
    insert_final_newline = true
    trim_trailing_whitespace = true

eslint和prettier的区别(共同助力代码质量)

eslint: 代码质量规则,例如:不能有未使用的变量,不能有无意义的bind,不能隐式定义全局变量,不能在promise中reject()空值

prettier: 格式化规则,例如:最大长,不允许空格和tab混合,关键字的spacing,冒号风格...,prettier会将整个项目保持在一个统一的风格。

eslint-config-prettier插件：解决eslint+ prettier的冲突,关闭eslint的规则配置 eslint-plugin-prettier: 用eslint去吊起prettier的规则配置（方便save的时候去执行prettier）

module.exports = {
  // 标识当前配置文件为eslint的根配置文件，让其停止在父级目录中继续寻找。
  root: true,
  env: {
    browser: true // 浏览器环境
  },
  extends: [
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:prettier/recommended",
    "prettier"
  ],
  rules: {
    "prettier/prettier": "error",
    'no-tabs': 'off',
    'no-mixed-spaces-and-tabs': 0,
    'eqeqeq': ['error', 'always'],
    '@typescript-eslint/class-name-casing': 'error'
  },
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: "./tsconfig.json",
    ecmaVersion: 6,
    sourceType: "module",
  },
  plugins: [
    '@typescript-eslint',
    'prettier'
  ]
}