前端项目相关配置文件

prettier配置文件

.prettierrc.js

module.exports = {
    // 一行最多 80 字符
    printWidth: 80,
    // 使用 2 个空格缩进
    tabWidth: 2,
    // 不使用缩进符，而使用空格
    useTabs: false,
    // 行尾需要有分号
    semi: false,
    // 避免报: delete (cr)的错
    endOfLine: 'auto',
    // 使用单引号
    singleQuote: true,
    // 在jsx中把'>' 单独放一行
    jsxBracketSameLine: false,
    // 末尾不添加多余的逗号
    trailingComma: 'none',
    // 此配置用于避免vue模板的html元素内容最后一个>被强制放到单独一行的问题
    htmlWhitespaceSensitivity:'ignore',
}

.prettierignore

node_modules
.history
dist
.vscode
mock
tsconfig.json
vue.config.js
babel.config.js
.eslintrc.js
webstorm.config.js

eslint配置文件

.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/typescript/recommended",
    "@vue/prettier",
    "@vue/prettier/@typescript-eslint",
  ],
  parserOptions: {
    ecmaVersion: 2020,
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
  },
};

.eslintignore

node_modules
.history
dist
.vscode
mock
tsconfig.json
vue.config.js
babel.config.js
.eslintrc.js
webstorm.config.js

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": ["webpack-env"],
    "paths": {
      "@/*": ["src/*"]
    },
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx", "mock/**/*.ts"],
  "exclude": ["node_modules"]
}

jsconfig.js

{
    "compilerOptions": {
        "target": "esnext",
        "module": "esnext",
        "strict": true,
        "moduleResolution": "node",
        "skipLibCheck": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "baseUrl": ".",
        "paths": {
            "@/*": ["src/*"]
        },
        "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
    },
    "include": ["src/**/*.js", "src/**/*.vue", "tests/**/*.js", "mock/**/*.js"],
    "exclude": ["node_modules", ".history", "dist"]
}

webstorm.config.js

const path = require('path');

function resolve(dir) {
  return path.join(__dirname, '.', dir);
}

module.exports = {
  context: path.resolve(__dirname, './'),
  resolve: {
    extensions: ['.js', '.jsx', '.json', '.less', '.css'],
    alias: {
      '@': resolve('src'),
      'components': resolve('components'),
      'examples': resolve('examples'),
    },
  },
};

vue.config.js

const path = require("path");
function resolve(dir) {
  return path.join(__dirname, dir);
}

module.exports = {
  chainWebpack: config => {
    // 配置别名
    config.resolve.alias
      .set("@", resolve("src"))
      .set("assets", resolve("src/assets"))
      .set("components", resolve("src/components"))
      .set("base", resolve("baseConfig"))
      .set("public", resolve("public"));
  },
}