[GN] 使用vue3+vite+ts+prettier+eslint-Toy模板网

这篇具有很好参考价值的文章主要介绍了[GN] 使用vue3+vite+ts+prettier+eslint。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

学习目标：

做到代码格式等统一，此时，esint和prettier就要登场了。

学习内容：

eslint是代码检测工具，可以检测出你代码中潜在的问题，比如使用了某个变量却忘记了定义。
prettier是代码格式化工具，作为代码格式化工具，能够统一你或者你的团队的代码风格。

=> 安装prettier+eslint包，并做一系列的配置

学习时间：

创建项目

yarn create vite

选择vue 作为 framework
选择 vue-ts

是package.json中配置的eslint和prettier相关的包：

{
  "name": "xxx",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.47"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.57.0",
    "@typescript-eslint/parser": "^5.57.0",
    "@vitejs/plugin-vue": "^4.1.0",
    "eslint": "^8.37.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-config-standard": "^17.0.0",
    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-promise": "^6.1.1",
    "eslint-plugin-vue": "^9.10.0",
    "prettier": "^2.8.7",
    "prettier-eslint": "^15.0.1",
    "typescript": "^4.9.3",
    "vite": "^4.2.0",
    "vue-eslint-parser": "^9.1.1",
    "vue-tsc": "^1.2.0"
  }
}

命令：

yarn add 
@typescript-eslint/eslint-plugin 
@typescript-eslint/parser eslint eslint-config-prettier eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-prettier eslint-plugin-promise eslint-plugin-vue prettier prettier-eslint vue-eslint-parser -D

当这些依赖包安装完成后，然后辅助配置了。

使eslint生效，我们需要在根目录创建.eslintrc.cjs文件。

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-essential',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended'
  ],
  overrides: [],
  parser: 'vue-eslint-parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    parser: '@typescript-eslint/parser'
  },
  plugins: ['vue', '@typescript-eslint'],
  rules: {
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'vue/multi-word-component-names': 'off',
    'prettier/prettier': 'error',
    '@typescript-eslint/no-explicit-any': 'off'
  }
}

如果某些文件不想做校验，可以创建.eslintignore来屏蔽。

public
node_modules
dist
src/assets/*
build/*

个性化prettier，要创建.prettier.cjs。

module.exports = {
  "extends": [
  "airbnb",
  "prettier",
  "prettier/react"
  ],
  "singleQuote": true, // 使用单引号
  "printWidth": 80, // 超过最大值换行
  "htmlWhitespaceSensitivity": "ignore",
  "semi": false, // 结尾不用分号
  "trailingComma": "none", // 函数最后不需要逗号
  "arrowParens": "avoid", // 箭头函数参数只有一个时，不需要括号
  "bracketSpacing": true, // 对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
  "jsxBracketSameLine": false, // 在jsx中把'>' 是否单独放一行
  "jsxSingleQuote": true, // 在jsx中使用单引号代替双引号
  "proseWrap": 'preserve', //代码超出是否要换行 preserve保留
 };

最后在.vscode目录下创建settings.json做统一配置文章来源地址https://www.toymoban.com/news/detail-793554.html

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.format.enable": true,
  "eslint.validate": [
    "vue",
    "html",
    "javascript",
    "typescript",
    "javascriptreact",
    "typescriptreact",
    "less",
    "css",
    "scss",
    "json",
    "jsonc"
  ],
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}