vscode AutoSave With Prettier

[hsipeng]

安装

eslint 和 prettier vscode 插件

环境安装

# 基础依赖
yarn add eslint babel-core babel-eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-vue eslint-plugin-html eslint-config-prettier eslint-plugin-prettier prettier -D
 
# fbjs eslint 配置
yarn add eslint-config-fbjs -D
# fbjs plugin 依赖
yarn add eslint-plugin-babel eslint-plugin-flowtype eslint-plugin-relay babel-eslint -D

ps 依赖安装时如果全局依赖安装，那就统一全局依赖安装，如果workspace 安装，那就-D，npm 安装自行转换

.eslintrc.js

module.exports = {
  "extends": [
    "fbjs"
  ],
  "plugins": [
    "prettier",
    "react"
  ],
  "parser": "babel-eslint",
  "rules": {
    "relay/graphql-naming": 0,
    "max-len": 1,
    "singleQuote": true,
    "trailingComma": "all",
  },
  "env": {
    "node": true,
    "browser": true
  }
}

.prettierrc.js

{
  "bracketSpacing": false,
  "jsxBracketSameLine": true,
  "parser": "flow",
  "printWidth": 60,
  "singleQuote": true,
  "trailingComma": "es5"
  }

vscode 配置

    "prettier.eslintIntegration": true,
    "eslint.autoFixOnSave": true,
// 关闭系统自带的format
    "editor.formatOnSave": false,
    "javascript.format.enable": false,