vscode 配置统一代码风格

ESLint：作代码质量检测、编码风格约束等；
Prettier: 专注于代码格式化的工具，美化代码；
EditorConfig: 跨编辑器和IDE编写代码，保持一致的简单编码风格；

Eslint 编码风格约束比如分号引号这些；质量检查比如冗余代码检查等

最初有这两个就行了，可以实现团队协作问题不大

后来有了代码美化工具，例如 prettier 这个是为了美化代码比如换行等格式化看起来代码没那么乱

如果两个都用了问题来了冲突。 prettier规则和eslint有了冲突导致的结果： prettier美化完save的时候eslint用自己的规则又还原回去了

导致死循环崩溃

解决办法： editorconfig 加一个编辑器规则配置文件，让这个规则和eslint保持一致并且可以添加一些编辑器的配置，使大家编辑器配置一样

再加一个工具吧， prettierrc文件，让大家的prettier规则一致

综上编辑器配置一样、eslint配置一样、prettier美化配置一样当然编写出来的代码是一样的

默认情况下 vscode是没有校验的，项目里的eslintrc也不会被识别。开发没有报错，但是在控制台编译时会报错
安装eslint插件，然后在编辑器右下角可以看到Eslint 代表vscode代码风格被eslint托管，这时编辑器会读取本地eslintrc配置并自动fix
此时setting.json 是这样的。这是必要的

image.png

// vscode 配置保存时运行eslint、stlyelint并自动fix
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"source.fixAll.stylelint": true
},

升级（安装prettier）
出现冲突，比如prettier默认规则是行尾加分号，用的是双引号，但是eslint规则是单引号行尾没分号
因为setting里配置的是保存是使用eslint修复，所以情况还好 eslint把引号和分号fix掉了

下面开始配置prettierrc 让双方规则一致。既能体验prettier的美化代码又能兼顾eslint

editorconfig好像很鸡肋没什么卵用。因为它只能设置缩进这样简单的风格单双隐号都不管

setting

{
  "folders": [   ],
  "settings": {
    // 文件内的字体
    "editor.fontSize": 16,
    // 行高
    // "editor.lineHeight": 26,
    "editor.rulers": [],
    // vscode 配置保存时运行eslint、stlyelint并自动fix
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
        "source.fixAll.stylelint": true
    },
    // "editor.semanticTokenColorCustomizations": null,
    // 和27行的效果是一样的
    "editor.formatOnSave": true,
    "eslint.validate": ["javascript", "vue", "html"],
    // "editor.defaultFormatter": "esbenp.prettier-vscode",
    "vetur.format.defaultFormatter.html": "js-beautify-html" //格式化.vue中html
  }
}

eslint rc

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module'
  },
  env: {
    browser: true,
    node: true,
    es6: true
  },
  extends: ['plugin:vue/essential', 'standard'],
  plugins: ['vue'],
  // add your custom rules here
  // it is base on https://github.com/vuejs/eslint-config-vue
  rules: {
    // allow async-await
    'generator-star-spacing': 'off',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'arrow-parens': 'off',
    // allow async-await
    'eol-last': 'off',
    'max-len': 0,
    'space-before-function-paren': 'off',
    quotes: [
      // 尽可能使用单引号
      'error',
      'single'
    ],
    semi: [
      // 尽可能不加分号
      'error',
      'never'
    ],
    'no-new': 0,
    'prefer-promise-reject-errors': 0,
    camelcase: 0,
    'vue/no-use-v-if-with-v-for': 0,
    'vue/require-component-is': 0,
    'vue/valid-v-model': 0
  }
}

prettier

module.exports = {
  // 设置强制单引号
  singleQuote: true,
  // 设置语句末尾不加分号
  semi: false,
  // jsx中使用单引号
  jsxSingleQuote: true,
  // tab缩进大小,默认为2
  tabWidth: 2,
  // 使用tab缩进，默认false
  useTabs: false,
  // 对象中打印空格 默认true
  // true: { foo: bar }
  // false: {foo: bar}
  bracketSpacing: true,
  // 箭头函数参数括号 默认avoid 可选 avoid| always
  // avoid 能省略括号的时候就省略 例如x => x
  // always 总是有括号
  arrowParens: 'avoid'
  // 为多行数组的非末尾行添加逗号 es5的对象，数组等
  // "trailingComma": "es5",
  // 每行最大宽度 100
  // "printWidth": 100,
}

vscode 配置统一代码风格

你可能感兴趣的:(vscode 配置统一代码风格)