vite中引入eslint、prettier、别名

一、别名。

        1、npm i @types/node -D。

        2、vite.config.js。           

import path from 'path'

resolve: {

    alias: {

      '@': path.resolve(__dirname, './src')

    }

 },

        3、tsconfig.json。

"compilerOptions":{
        . . . ,

        "baseUrl": ".",

        "paths": {

              "@/*": ["./src/*"]

          }

}

二、引入eslint
        1、npm i eslint@8 -D
        2、npx eslint --init  (按照项目选择、会自动下载相应包) 

三、集成vite

        1、npm i vite-plugin-eslint -D 

        2、vite.config.ts

import pluginEslint from "vite-plugin-eslint"
plugins：[

        . . . ,

        vue(),

        pluginEslint()

]

四、引入prettier

        1、 npm i prettier eslint-config-prettier eslint-plugin-prettier -D

        2、创建.prettierrc.cjs

module.exports={

  "tabWidth": 2,//tab的宽度 2个字符

   "printWidth": 100,    //每行最多显示的字符数

   "useTabs": false,//禁止使用tab代替空格

   "semi": true,//结尾使用分号

   "singleQuote": true,//使用单引号代替双引号

   "trailingComma": "none",//结尾是否添加逗号

   "bracketSpacing": true,//对象括号俩边是否用空格隔开

   "bracketSameLine": true,//组件最后的尖括号不另起一行

   "arrowParens": "always",//箭头函数参数始终添加括号

   "htmlWhitespaceSensitivity": "ignore",//html存在空格是不敏感的

   "vueIndentScriptAndStyle": true,//vue 的script和style的内容是否缩进

   "endOfLine": "auto",//行结尾形式 mac和linux是\n  windows是\r\n 

   "singleAttributePerLine": true//组件或者标签的属性是否控制一行只显示一个属性

}

        3、.eslintrc.cjs

extends：{

        . . . ,
        "plugin:prettier/recommended"

} ,
plugins:[

        . . . ,

        "prettier"

]

五、安装vscode插件

        1、安装Eslint、Prettier - Code formatter 插件。

        2、分别点击2个插件的扩展设置，选中Enable下面的选择框。

        3、在文件内右键 -> 使用...格式文档 -> 配置默认格式化程序 -> 选中prettier。

        4、重启项目，即可生效。