hongyangwu

主题

环境 ​

创建项目 ​

shell
npm init @vitejs/app

vue2 不在可选择列表中，若想创建，在官方文档中查找 Awesome ，查看 vue2 的模板

集成 EsLint ​

  1. 安装 eslint 包

    shell
    npm i eslint -D

  2. 自动生成Eslint配置文件

    shell
    # 使用npx
npx eslint --init
# 或者按照官网来
./node_modules/.bin/eslint --init

  3. 根据命令提示，完成操作

    • How would you like to use ESLint? （你想如何使用eslint？）
      • To check syntax only（只检查语法检查语法并发现问题）
      • To check syntax and find problems（检查语法并发现问题）
      • To check syntax, find problems, and enforce code style（检查语法，发现问题，并强制代码样式）
    • What type of modules does your project use?（您的项目使用什么类型的模块?）
      • JavaScript modules (import/export)
      • CommonJS (require/exports)
      • None of these（这些中没有任何一个）
    • Which framework does your project use? （你的项目使用什么框架？）
      • React
      • Vue.js
      • None of these（这些中没有任何一个）
    • Does your project use TypeScript?（你的项目中使用Typescript吗？）
    • Where does your code run?（你的代码运行在？）
      • Browser（浏览器）
      • Node
    • How would you like to define a style for your project?（你想给你的项目定义什么风格？）
      • Use a popular style guide（使用一个流行的风格指南）
      • Answer questions about your style（回答你关于风格的问题）
      • Inspect your JavaScript file（检查你的javascript文件）
    • Which style guide do you want to follow? （你想遵循是么样的风格指南？）
    • What format do you want your config file to be in?（你希望配置文件的格式是什么？）
      • JavaScript
      • YAML
      • JSON
    • Would you like to install these now with nom?（你希望现在有 npm 安装这些包吗？）

  4. VSCode 中需要安装Eslint插件

常见问题

  1. The template root requires exactly one element（不支持多节点）

    • Vue3 是支持多节点的

    • 在 .eslintrc.js 中使用 vue3 解析器

      js
      "extends": [
	"plugin:vue/vue3-essential"
],

  2. 某些配置文件需要使用 module.exports

    • 在根目录下创建 .eslintignore 文件，并把那些配置文件加入到里面

      /node_modules/
/public/
.vscode
.idea
.eslintrc.js

  3. 'defineProps' and 'defineEmits' 报错 no-undef

    • 在 .eslintrc.js 中开启使用 script setup

      js
      "env": {
	"vue/setup-compiler-macros": true
}

  4. prettier 和 eslint 产生冲突

    • 安装包

      shell
      npm i eslint-plugin-prettier eslint-config-prettier -D

    • 在.eslintrc.js文件中配置插件

      js
      "extends": [
    'plugin:prettier/recommended',// 添加 prettier 插件
  ]

集成 prettier ​

  1. 安装 prettier 包

    shell
    npm i prettier -D

  2. 创建配置文件 在项目根目录下面创建.prettierrc.js文件

    js
    {
  "printWidth": 80, // 单行输出（不折行）的（最大）长度
  "useTabs": false, // 不使用缩进符，而使用空格
  "tabWidth": 2, // 每个缩进的空格数
  "tabs": false, // 使用制表符 (tab) 缩进行而不是空格 (space)
  "semi": true, // 是否在语句末尾打印分号
  "singleQuote": true, // 是否使用单引号
  // "quoteProps": "as-needed", // 尽在需要时在对象属性周围添加引号
  "trailingComma": "all", // 去除对象最末尾元素跟随的逗号
  "arrowParens": "always", // 箭头函数，只有一个参数的时候，也需要括号
  "rangeStart": 0, // 每个文件格式化的范围是文件的全部内容
  "proseWrap": "always", // 当超出print width（上面有这个参数）时就折行
  "endOfLine": "lf", // 换行符使用 lf
  "bracketSpacing": true, // 是否在对象属性添加空格
  "jsxBracketSameLine": true, // 将 > 多行 JSX 元素放在最后一行的末尾，而不是单独放在下一行（不适用于自闭元素）,默认false,这里选择>不另起一行
  "htmlWhitespaceSensitivity": "ignore", // 指定 HTML 文件的全局空白区域敏感度, "ignore" - 空格被认为是不敏感的
  "jsxSingleQuote": false, // jsx 不使用单引号，而使用双引号
  "rangeStart": 0, // 每个文件格式化的范围是文件的全部内容
}

Copyright © 2021-2024 hongyangwu