vite+ ts + vue3 +eslint + prettier

djtwebblog

已于 2023-05-03 17:48:04 修改

阅读量105

点赞数

文章标签： vue.js javascript 前端

于 2023-05-03 17:46:37 首次发布

本文链接：https://blog.csdn.net/djtwebblog/article/details/130475218

版权

该文描述了一个Vue3项目的配置文件，包括ESLint用于代码规范检查，Prettier负责代码格式化，以及Vite的构建设置。在ESLint中，设置了浏览器环境、最新ECMAScript版本和Vue3的支持，同时结合Prettier的规则以保持代码风格一致。package.json中定义了开发脚本，包括开发、构建、预览和代码检查。此外，还展示了VSCode的settings.js配置，实现保存时自动格式化和ESLint校验。

摘要由CSDN通过智能技术生成

.eslintrc.cjs

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
    'vue/setup-compiler-macros': true
  },
  extends: [
    'eslint:recommended', // 使用推荐的eslint
    'plugin:vue/vue3-recommended', // 使用插件支持vue3
    'plugin:prettier/recommended',
    'eslint-config-prettier',
  ],
  parser: 'vue-eslint-parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    parser: '@typescript-eslint/parser',
    ecmaFeatures: {
      modules: true,
      jsx: true,
    },
  },
  plugins: [
    'vue', // 引入vue的插件 eslint-plugin-vue
    'prettier', // 引入规范插件 eslint-plugin-prettier
    '@typescript-eslint',
  ],
  globals: {},
  // 这里时配置规则的,自己看情况配置
  rules: {},
}

prettierrc.js

module.exports = {
  printWidth: 120, // 每行代码长度（默认80）
  tabWidth: 2, // 每个tab相当于多少个空格（默认2）
  useTabs: false, // 是否使用tab进行缩进（默认false）
  singleQuote: true, // 使用单引号（默认false）
  semi: false, // 声明结尾使用分号(默认true)
  trailingComma: "es5", // 多行使用拖尾逗号（默认none）
  bracketSpacing: true, // 对象字面量的大括号间使用空格（默认true）
  arrowParens: "avoid", // 只有一个参数的箭头函数的参数是否带圆括号（默认avoid）
  endOfLine: "auto", // 文件换行格式 LF/CRLF
};

package.json

{
  "name": "vite-project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview",
    "lint": "eslint src --ext .vue,.js,.ts,.jsx,.tsx",
    "lint:fix": "eslint src --ext .vue,.js,.ts,.jsx,.tsx --fix"
  },
  "dependencies": {
    "typescript-eslint": "^0.0.1-alpha.0",
    "vue": "^3.2.47"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.21.8",
    "@typescript-eslint/eslint-plugin": "^5.59.2",
    "@vitejs/plugin-vue": "^4.1.0",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^8.0.3",
    "prettier": "^2.4.1",
    "typescript": "^5.0.2",
    "vite": "^4.3.2",
    "vue-tsc": "^1.4.2"
  }
}

settings.js

{
    "editor.formatOnType": true,
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "eslint.enable": true,
    "eslint.run": "onType",
    "eslint.options": {
        "extensions": [
            ".js",
            ".vue",
            ".jsx",
            ".tsx"
        ]
    },
}