vscode setting配置

command + p 搜索到settings.json文件，文件配置及注释如下

.vscode/setting.json

 "workbench.iconTheme": "vscode-icons-mac",
  "editor.renderIndentGuides": false,
  "cSpell.ignoreWords": ["antd"],
  "files.autoSave": "onFocusChange",  //编辑器失去焦点时自动保存更新后的文件
  "workbench.colorTheme": "Monokai",
  "git.confirmSync": false,
  "window.title": "${activeEditorLong}${separator}${rootName}",
  "window.zoomLevel": 0,
  "editor.fontSize": 14,
  "editor.tabSize": 2, //为了符合eslint的两个空格间隔原则
  "fileheader.Author": "samy",// 文件头部注释
  "fileheader.LastModifiedBy": "samy",
  "editor.formatOnSave": false,//关闭编辑器默认代码检查,为了不跟eslint配置冲突
  "javascript.format.enable": false,
  "eslint.autoFixOnSave": true,//eslint 格式化插件，保存时应用eslint规则自动格式化后保存
  "prettier.eslintIntegration": true,
  "prettier.semi": false,// 去掉代码结尾分号
  "git.path": "/usr/bin/git",
  "editor.fontFamily": "Microsoft YaHei，Menlo, Monaco, 'Courier New', monospace",
  "editor.fontWeight": "bold",
  "javascript.updateImportsOnFileMove.enabled": "never",
  "explorer.confirmDragAndDrop": false
}

格式配置方式

Prettier uses cosmiconfig (opens new window) for configuration file support. This means you can configure prettier via (in order of precedence):

• A "prettier" key in your package.json file.
• A .prettierrc file, written in JSON or YAML, with optional extensions: .json/.yaml/.yml (without extension takes precedence).
• A .prettierrc.js or prettier.config.js file that exports an object.
• A .prettierrc.toml file, written in TOML (the .toml extension is required).

.prettierrc文件

// .prettierrc 文件 这里修改的都是与默认值不同的，没有修改到的就是启用默认值 // .prettierrc 文件是使用 json 格式，如果报错了，该配置文件在编辑器里面是不会生效的

{
  "bracketSpacing": true,
  "printWidth": 160,
  "semi": false,
  "singleQuote": true
}

package.json中的prettier属性

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

prettier.config.js

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

详细记录

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"
    // ]
  }
}