JavaScript开发中常用的代码规范配置文件

一、jsconfig.json

{
  compilerOptions: {
    target: \'es6\',
    experimentalDecorators: true,
    allowSyntheticDefaultImports: true,
    baseUrl: \'.\',
    paths: {
      // "@/*": [
      // "./src/*"
      // ],
      \'@assets/*\': [\'./src/assets/*\'],
      \'@components/*\': [\'./src/components/*\'],
      \'@config/*\': [\'./src/config/*\'],
      \'@service/*\': [\'./src/service/*\'],
      \'@mixins/*\': [\'./src/mixins/*\']
    }
  },
  exclude: [\'node_modules\', \'dist\'],
  include: [\'./src/**/*\']
}

二、.postcssrc.js

// https://github.com/michael-ciniawsky/postcss-load-config
module.exports = {
  plugins: {
    \'postcss-import\': {},
    \'postcss-url\': {},
    // to edit target browsers: use "browserslist" field in package.json
    autoprefixer: {
      browsers: [\'Firefox >= 10\', \'IE >= 8\', \'chrome >= 10\', \'safari >= 10\']
    }
  }
}

三、.babelrc

{
  presets: [
    [
      \'env\',
      {
        modules: false,
        targets: {
          browsers: [\'> 1%\', \'last 2 versions\', \'not ie <= 8\']
        }
      }
    ],
    \'es2015\',
    \'stage-2\'
  ],
  plugins: [
    \'transform-vue-jsx\',
    [\'transform-runtime\', { polyfill: false }],
    [
      \'component\',
      {
        libraryName: \'element-ui\',
        styleLibraryName: \'theme-chalk\'
      }
    ]
  ]
}

四、 .prettierrc

{
  "bracketSpacing": true,   // 是否在对象属性添加空格，这里选择是 { foo: bar }
  "printWidth": 160,        // 指定代码换行的行长度。单行代码宽度超过指定的最大宽度，将会换行，如果都不想换，可以添加 "proseWrap": "never"
  "semi": false,            // 是否在语句末尾打印分号，这里选择不加
  "singleQuote": true       // 是否使用单引号，这里选择使用
}

五、 .editorconfig

root = true

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

六、 .eslintrc.js（强制开启验证模式）

// http://eslint.org/docs/user-guide/configuring
module.exports = {
  extends: \'eslint:recommended\',
  parserOptions: {
    sourceType: \'module\'
  },
  parser: \'babel-eslint\',
  globals: {
    // Put things like jQuery, etc
    jQuery: true,
    $: true,
    Swiper: true
  },
  env: {
    browser: true,
    commonjs: true,
    es6: true,
    node: true
  },
  rules: {
    \'no-alert\': 0,
    \'no-console\': 0,
    indent: [\'error\', 2, { SwitchCase: 1}], // switchcase 解决 switch case 缩进报错问题
    \'linebreak-style\': [\'error\', \'unix\'],
    quotes: [\'error\', \'single\']
    // "semi": [
    //  "error",
    //  "always"
    // ]
  }
}