常用的一些 Web 前端配置

Question

别名配置

JS 配置

新建 jsconfig.json , 方便编辑器代码跳转，对构建无意义

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "exclude": ["node_modules"],
  "include": ["src/**/*"]
}

TS 配置

在 tsconfig.json 中配置 paths

 "compilerOptions": {
    "paths": {
      "@/*":["./src/*"]
    }
  }

Webpack 配置

webpack.config.js 配置 resolve

  resolve: {
        alias: {
            '@': path.resolve('src'),
        },
  },

Vite 配置

vite.config.js 中配置 resolve

resolve: {
    alias: {
      "@": path.resolve(__dirname, 'src')
    }
  }

Babel 配置（RN 使用时）

下载插件 babel-plugin-module-resolver ,在 babel.config.js 中配置

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        alias: {
          '@': './src',
        },
      },
    ],
  ],
}

eslint

出现 delete-cr-prettier

在 windows 上换行符会出现这个问题，配置 规则即可

 'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto',
      },
],