项目开发体验配置

eslint 插件

使用prittier插件

链接：Eslint-plugin-prettier

安装

npm install --save-dev eslint-plugin-prettier
npm install --save-dev --save-exact prettier
npm install --save-dev eslint-config-prettier

使用

.eslintrc

{
  "extends": ["plugin:prettier/recommended"]
}

作用等同于：

{
  "extends": ["prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error",
    "arrow-body-style": "off",
    "prefer-arrow-callback": "off"
  }
}

vscode setting.json

{
  "editor.codeActionsOnSave": {
    "source.fixAll.tslint": true,
    "source.fixAll.eslint": true
  },
}

使用import插件来支持别名

链接：eslint-plugin-import

安装

npm install eslint-plugin-import --save-dev

使用

.eslintrc

{
  "plugins":["import"]
  "settings": {
    "import/resolver": {
      "webpack": {
        "config": "./webpack.base.config.js"
      }
    }
  },
}  

vscode 插件

别名路径补全插件

链接：Path Autocomplete - Visual Studio Marketplace

安装

vscode搜索Path Autocomplete并安装

配置

{
  "path-autocomplete.pathMappings": {
    "@": "${folder}/src"
  },
}

别名路径跳转

链接：别名路径跳转 - Visual Studio Marketplace

安装

vscode搜索别名路径跳转并安装

配置

{
  "alias-skip.mappings": {
    "@": "/src" // 默认只有`@`映射，映射到`/src`，你可以添加更多映射，映射路径必须以`/`开头
  },
}

jsconfig.json

Find All References失效问题

根目录添加jsconfig.json文件

{
  "compilerOptions": {
    "target": "ES6",
    "baseUrl": ".",
    "jsx": "react",
    "paths": {
      "@src/*": ["./src/*"]
    }
  },
  "exclude": ["node_modules", "**/node_modules/*", "dist"]
}