原本要搞一下算法和Asp.NetCore,但是想到vite+vue3还有几个插件没有记录,总是感觉怪怪的,所以今天下午把eslint+prettier、postcss和svgIcon这四个插件试验性的做了个Demo,以下记录这四个的使用过程。
一、开始工作
1.eslint+prettier
1.1.eslint
1.1.1.简要说明:eslint的作用就是约束代码规范的,不论是个人项目还是多人合作,规范的代码风格都是一种保证,对可读性,避免语法错误等有很大的帮助。
1.1.2.步骤过程:
a)安装eslint:npm i eslint -D
b)配置eslint:执行npx eslint --init命令,然后按照提示完成一系列操作来创建配置文件
问:How would you like to use ESLint? (你想如何使用 ESLint?)
答:选择To check syntax, find problems, and enforce code style(检查语法、发现问题并强制执行代码风格)
问:What type of modules does your project use?(你的项目使用哪种类型的模块?)
答:选择 JavaScript modules (import/export)
问:Which framework does your project use? (你的项目使用哪种框架?)
答:选择 Vue.js
问:Does your project use TypeScript?(你的项目是否使用 TypeScript?)
答:选择No
问:Where does your code run?(你的代码在哪里运行?)
答:选择 Browser 和 Node
问:How would you like to define a style for your project?(你想怎样为你的项目定义风格?)
答:选择 Use a popular style guide(使用一种流行的风格指南)
问:Which style guide do you want to follow?(你想遵循哪一种风格指南?)
答:选择 Airbnb
问:What format do you want your config file to be in?(你想你的配置文件使用什么格式?)
答:选择JavaScript
问:Would you like to install them now with npm?(你想现在就用 NPM 安装它们吗?)
答:选择Yes
c)在VSCode使用ESlint,需要安装插件:ESLint
1.1.3.配置信息:
module.exports = {
env: {
browser: true,
es2021: true,
'vue/setup-compiler-macros': true
},
extends: [
'airbnb-base',
'plugin:vue/vue3-essential',
'plugin:vue/vue3-recommended',
'plugin:prettier/recommended' // 添加 prettier 插件
],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module'
},
plugins: ['vue'],
rules: {
/*
* "off" 或 0 - 关闭规则
* "warn" 或 1 - 开启规则,使用警告级别的错误:warn (不会导致程序退出)
* "error" 或 2 - 开启规则,使用错误级别的错误:error (当被触发的时候,程序会退出)
*/
'vue/no-multiple-template-root': 'off', // 关闭多根节点的校验
'vue/multi-word-component-names': 'off', // 关闭组件命名规则
'vue/singleline-html-element-content-newline': 'off',
'vue/multiline-html-element-content-newline': 'off',
'vue/component-definition-name-casing': ['error', 'PascalCase'], // off=0|warn=1|error=2,'kebab-case'|'PascalCase'
'vue/no-v-html': 'off',
'import/no-unresolved': 'off',
'import/extensions': 'off',
'import/no-absolute-path': 'off',
'import/no-extraneous-dependencies': 'off',
'accessor-pairs': 2, // 定义对象的set存取器属性时,强制定义get
'arrow-spacing': [2, { before: true, after: true }], // =>的前/后括号
'block-spacing': [2, 'always'], // 块是否需要空格
'brace-style': [2, '1tbs', { allowSingleLine: true }], // if while function 后面的{必须与if在同一行,java风格
camelcase: [0, { properties: 'always' }], // 强制驼峰法命名
'comma-dangle': [2, 'never'], // 数组和对象键值对最后一个逗号,never:不能带末尾的逗号, always:必须带末尾的逗号,always-multiline:多行模式必须带逗号,单行模式不能带逗号
'comma-spacing': [2, { before: false, after: true }], // 控制逗号前后的空格
'comma-style': [2, 'last'], // 控制逗号在行尾出现还是在行首出现
'constructor-super': 2, // 强制在子类构造函数中用super()调用父类构造函数,TypeScript的编译器也会提示
curly: [2, 'multi-line'], // 强制所有控制语句使用一致的括号风格
'dot-location': [2, 'property'], // 强制object.key中.的位置,参数:property:'.'号应与属性在同一行, object:'.'号应与对象名在同一行
'eol-last': 2, // 文件末尾强制换行
eqeqeq: ['error', 'always', { null: 'ignore' }], // 使用 === 替代 ==
'generator-star-spacing': [2, { before: true, after: true }], // 生成器函数*的前后空格
'handle-callback-err': [2, '^(err|error)$'], // nodejs 处理错误
indent: [2, 2, { SwitchCase: 1 }], // 缩进风格
'jsx-quotes': [2, 'prefer-single'], // JSX 属性中一致使用双引号或单引号
'key-spacing': [2, { beforeColon: false, afterColon: true }], // 对象字面量中冒号的前后空格
'keyword-spacing': [2, { before: true, after: true }], // 对象字面量中冒号的前后空格
'new-cap': [2, { newIsCap: true, capIsNew: false }], // 函数名首行大写必须使用new方式调用,首行小写必须用不带new方式调用
'new-parens': 2, // new时必须加小括号
'no-array-constructor': 2, // 禁止使用数组构造器
'no-caller': 2, // 禁止使用arguments.caller或arguments.callee
'no-console': 'off', // 禁用 console
'no-class-assign': 2, // 禁止给类赋值
'no-cond-assign': 2, // 禁止在条件表达式中使用赋值语句
'no-const-assign': 2, // 禁止修改const声明的变量
'no-control-regex': 0, // 禁止在正则表达式中使用控制字符
'no-delete-var': 2, // 不能对var声明的变量使用delete操作符
'no-dupe-args': 2, // 函数参数不能重复
'no-dupe-class-members': 2, // 不允许类中出现重复的声明
'no-dupe-keys': 2, // 在创建对象字面量时不允许键重复 {a:1,a:1}
'no-duplicate-case': 2, // switch中的case标签不能重复
'no-empty-character-class': 2, // 正则表达式中的[]内容不能为空
'no-empty-pattern': 2, // 禁止使用空解构模式
'no-eval': 2, // 禁止使用eval
'no-ex-assign': 2, // 禁止给catch语句中的异常参数赋值
'no-extend-native': 2, // 禁止扩展native对象
'no-extra-bind': 2, // 禁止不必要的函数绑定
'no-extra-boolean-cast': 2, // 禁止不必要的bool转换
'no-extra-parens': [2, 'functions'], // 禁止非必要的括号
'no-fallthrough': 2, // 禁止switch穿透
'no-floating-decimal': 2, // 禁止省略浮点数中的0 .5 3.
'no-func-assign': 2, // 禁止重复的函数声明
'no-implied-eval': 2, // 禁止使用隐式eval
'no-inner-declarations': [2, 'functions'], // 禁止在块语句中使用声明(变量或函数)
'no-invalid-regexp': 2, // 禁止无效的正则表达式
'no-irregular-whitespace': 2, // 不能有不规则的空格
'no-iterator': 2, // 禁止使用__iterator__ 属性
'no-label-var': 2, // label名不能与var声明的变量名相同
'no-labels': [2, { allowLoop: false, allowSwitch: false }], // 禁止标签声明
'no-lone-blocks': 2, // 禁止不必要的嵌套块
'no-lonely-if': 'off', // 禁止-if-语句作为唯一语句出现在-else-语句块中
'no-mixed-spaces-and-tabs': 2, // 禁止混用tab和空格
'no-multi-spaces': 2, // 不能用多余的空格
'no-multi-str': 2, // 字符串不能用\换行
'no-multiple-empty-lines': [2, { max: 1 }], // 空行最多不能超过1行
'no-native-reassign': 2, // 不能重写native对象
'no-negated-in-lhs': 2, // in 操作符的左边不能有!
'no-new-object': 2, // 禁止使用new Object()
'no-new-require': 2, // 禁止使用new require
'no-new-symbol': 2, // 禁止使用new symbol
'no-new-wrappers': 2, // 禁止使用new创建包装实例,new String new Boolean new Number
'no-obj-calls': 2, // 不能调用内置的全局对象,比如Math() JSON()
'no-octal': 2, // 禁止使用八进制数字
'no-octal-escape': 2, // 禁止使用八进制转义序列
'no-path-concat': 2, // node中不能使用__dirname或__filename做路径拼接
'no-proto': 2, // 禁止使用__proto__属性
'no-redeclare': 2, // 禁止重复声明变量
'no-regex-spaces': 2, // 禁止在正则表达式字面量中使用多个空格 /foo bar/
'no-return-assign': [2, 'except-parens'], // return 语句中不能有赋值表达式
'no-self-assign': 2, // 自我分配
'no-self-compare': 2, // 不能比较自身
'no-sequences': 2, // 禁止使用逗号运算符
'no-shadow-restricted-names': 2, // 严格模式中规定的限制标识符不能作为声明时的变量名使用
'no-spaced-func': 2, // 函数调用时 函数名与()之间不能有空格
'no-sparse-arrays': 2, // 禁止稀疏数组, [1,,2]
'no-this-before-super': 2, // 在调用super()之前不能使用this或super
'no-throw-literal': 2, // 禁止抛出字面量错误 throw "error"
'no-trailing-spaces': 2, // 一行结束后面不要有空格
'no-undef': 2, // 不能有未定义的变量
'no-undef-init': 2, // 变量初始化时不能直接给它赋值为undefined
'no-unexpected-multiline': 2, // 避免多行表达式
'no-unmodified-loop-condition': 2, // 检查引用是否在循环中被修改
'no-unneeded-ternary': [2, { defaultAssignment: false }], // 禁止可以在有更简单的可替代的表达式时使用三元操作符
'no-unreachable': 2, // 不能有无法执行的代码
'no-unsafe-finally': 2, // 禁止对关系运算符的左操作数使用否定操作符
'no-unused-vars': [2, { vars: 'all', args: 'none' }], // 不能有声明后未被使用的变量或参数
'no-useless-call': 2, // 禁止不必要的call和apply
'no-useless-computed-key': 2, // 没有必要使用带文字的计算属性
'no-useless-constructor': 2, // 可以在不改变类的工作方式的情况下安全地移除的类构造函数
'no-useless-escape': 0, // 禁用不必要的转义字符
'no-whitespace-before-property': 2, // 禁止属性前有空白
'no-with': 2, // 禁用with
'one-var': [2, { initialized: 'never' }], // 连续声明
'operator-linebreak': [2, 'after', { overrides: { '?': 'before', ':': 'before' } }], // 换行时运算符在行尾还是行首
'padded-blocks': [2, 'never'], // 块语句内行首行尾是否要空行
'space-before-blocks': [2, 'always'], // 不以新行开始的块{前面要不要有空格
'space-before-function-paren': [
2,
{ anonymous: 'never', named: 'never', asyncArrow: 'always' }
], // 函数定义时括号前面要不要有空格
'space-in-parens': [2, 'never'], // 小括号里面要不要有空格
'space-infix-ops': 2, // 中缀操作符周围要不要有空格
'space-unary-ops': [2, { words: true, nonwords: false }], // 一元运算符的前/后要不要加空格
// 注释风格不要有空格什么的
'spaced-comment': [
2,
'always',
{ markers: ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ','] }
],
'template-curly-spacing': [2, 'never'], // 要求或禁止模板字符串中的嵌入表达式周围空格的使用
'use-isnan': 2, // 禁止比较时使用NaN,只能用isNaN()
'valid-typeof': 2, // 必须使用合法的typeof的值
'wrap-iife': [2, 'any'], // 立即执行函数表达式的小括号风格
'yield-star-spacing': [2, 'both'], // 强制在 yield* 表达式中 * 周围使用空格
yoda: [2, 'never'], // 禁止尤达条件
'prefer-const': 2, // 首选const
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0, // 禁用 debugger
'object-curly-spacing': [0, 'always', { objectsInObjects: false }], // 大括号内是否允许不必要的空格
'array-bracket-spacing': [2, 'never'], // 是否允许非空数组里面有多余的空格
'no-restricted-syntax': 0, // 禁止使用特定的语法
'no-loop-func': 0, // 禁止循环中存在函数
'consistent-return': 0, // 要求 return 语句要么总是指定返回的值,要么不指定
'import/prefer-default-export': 0, // 希望导出default,即export default xxx
quotes: [2, 'single', { avoidEscape: true, allowTemplateLiterals: true }], // 引号类型 `` "" ''
semi: [2, 'never'], // 语句强制分号结尾
'semi-spacing': [2, { before: false, after: true }] // 分号前后空格
}
}
注意事项:
1.在vue3中,规则vue/name-property--casing已经被vue/component-definition-name-casing代替,在使用前者会出错。
2.新增规则:'no-lonely-if': 'off', // 禁止-if-语句作为唯一语句出现在-else-语句块中。
3.修改规则:'space-before-function-paren': [2,{ anonymous: 'never', named: 'never', asyncArrow: 'always' }], // 函数定义时括号前面要不要有空格。
1.1.4.使用问题:
a)在VSCode下ESlint插件不生效,如何排查问题
1.确保eslint配置文件和node_modules在根目录下
2.确定安装了vscode eslint插件
3.确认package.json中安装了 eslint和eslint-plugin等
4.vscode 按下f1
5.输入eslint
6.选择ESLint: Show Output Channel查看eslint报错信息
7.按照错误信息,去解决
b)defineProps' is not defined
1.定位问题:defineProps 属于 Vue3 的规则校验,需要在 eslint-plugin-vue官方指南中寻找对应配置。
2.解决问题:打开.eslintrc.js文件,在env配置项中添加“'vue/setup-compiler-macros': true”
c)使用eslint格式化代码
1.在package.json的scripts属性里配置 格式化 命令
"scripts": {
"lint": "eslint --fix --ext .js,.vue src"
}
2.终端执行命令:npm run lint
1.2.prettier
1.2.1.简要说明:它是一款强大的代码格式化工具,支持JavaScript、Typescript、Css、Scss、Less、JSX、Angular、Vue、GraphQL、JSON、Markdown等,基本上前端能用到的文件格式都可以搞定。
1.2.2.步骤过程:
a)安装prettier:npm i prettier -D
b)创建 Prettier 配置文件,在./src下创建.prettierrc文件,文件内容如下:
{
"useTabs": false,
"tabWidth": 2,
"printWidth": 100,
"singleQuote": true,
"trailingComma": "none",
"bracketSpacing": true,
"semi": false,
"endOfLine": "auto"
}
c)使用其命令格式化代码文件
# 格式化所有文件 (. 表示所有文件)
npx prettier --write .
d)使用VSCode编辑器,安装Prettier插件:Prettier - Code formatter
1.3.兼容问题
1.3.1.基于个人观点,其实使用eslint基本上已经满足需求了,使用这种组合方式反而会出现很多兼容性问题要解决。看到网友都推荐eslint+prettier组合,就记录一下吧。
1.3.2.解决eslint和prettier冲突
a)安装插件:npm i eslint-plugin-prettier eslint-config-prettier -D
b)修改.eslintrc.js配置文件,添加prettier插件
module.exports = {
...
extends: [
'plugin:vue/essential',
'airbnb-base',
'plugin:prettier/recommended' // 添加 prettier 插件
],
...
}
c)插件功能说明:
eslint-plugin-prettier 将 Prettier 的规则设置到 ESLint 的规则中。
eslint-config-prettier 关闭 ESLint 中与 Prettier 中会发生冲突的规则。
d)特别说明:即便配置上解决规则冲突的设置,还是会出现很多兼容性问题。
2.postcss
2.1.简要说明:postcss是一种对css编译的工具,类似于babel处理js,主要功能:1.使用下一代css语法,2.自动补全浏览器前缀,3.自动把px替换为rem,4.css代码压缩等。
2.2.步骤过程:
a).安装postcss和postcss-preset-env插件:npm install postcss postcss-preset-env -D
b).配置vite.config.js文件:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import postcssPresetEnv from 'postcss-preset-env'
// https://vitejs.dev/config/
export default defineConfig({
base: './',
publicDir: 'public', // 静态资源服务的文件夹
logLevel: 'info', // 控制台输出的级别 info 、warn、error、silent
clearScreen: true, // 设为false 可以避免 vite 清屏而错过在终端中打印某些关键信息
css: {
postcss: {
plugins: [postcssPresetEnv]
}
}
})
c).修改App.vue文件,编写测试示例:
<template>
<img alt="Vue logo" src="@/assets/logo.png" />
<div class="title">Hello Vite!</div>
<router-view />
</template>
<script>
export default {
name: 'App'
}
</script>
<style type="text/css">
.title {
font-size: 30px;
color: yellow;
user-select: none;
}
</style>
2.3.查看效果:启动项目,命令:npm run dev。我们重点关注样式title的user-select: none;打开浏览器,你会看到user-select:none;多出了好几处有前缀的属性项,如:-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;
2.4.注意事项:
2.4.1.上述过程中,使用了postcss-preset-env与postcss搭配,你也可以使用其他的插件,如autoprefixer等
2.4.2.由于vite自身已经集成了postcss,所以不要在根目录再创建postcss.config.js文件。如果创建了这个文件可能还会出错,因为vite是基于esmodule管理的,所有文件都会转换为module。
3.svgIcon
3.1.简要说明:svg图标是基于xml定义可缩放的矢量图形,由于其不会图形质量不会因分辨率导致失真,所以被大量应用于程序编码中。
3.2.步骤过程:
a)创建目录和文件结构:
目录:./src/icons
目录:./src/icons/svg
文件:./src/icons/index.vue
文件:./src/icons/svgBuilder.js
b)在./src/icons/svg目录里添加测试图标login-user.svg
c)安装svg插件:npm install svg-sprite-loader -D
d)编写./src/icons/index.vue文件
<template>
<div
v-if="isExternal"
:style="styleExternalIcon"
class="svg-external-icon svg-icon"
v-on="$attrs"
/>
<svg v-else :class="svgClass" aria-hidden="true" v-on="$attrs">
<use :xlink:href="iconName" />
</svg>
</template>
<script>
/**
* 名称:SvgIcon
* @param iconClass String required
* @param className String
* 依赖:src/icons/svgBuilder.js 需要在vite中配置
* 使用方式:
* 在 template 中使用 <svg-icon icon-class="login-user"/>
*/
export default {
name: 'SvgIcon',
props: {
iconClass: {
type: String,
required: true
},
className: {
type: String,
default: ''
}
},
computed: {
isExternal() {
return /^(https?:|mailto:|tel:)/.test(this.iconClass)
},
iconName() {
return `#icon-${this.iconClass}`
},
svgClass() {
if (this.className) {
return `svg-icon ${this.className}`
}
return 'svg-icon'
},
styleExternalIcon() {
return {
mask: `url(${this.iconClass}) no-repeat 50% 50%`,
'-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
}
}
}
}
</script>
<style scoped>
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
.svg-external-icon {
background-color: currentColor;
mask-size: cover !important;
display: inline-block;
}
</style>
e)引入./src/icons/index.vue文件,在main.js文件中
import * as Vue from 'vue'
import SvgIcon from './icons/index.vue'
import App from './App.vue'
const app = Vue.createApp(App)
app.component('svg-icon', SvgIcon)
app.mount('#app')
f)编写./src/icons/svgBuilder.js文件,需要安装fs模块:npm install fs
import { readFileSync, readdirSync } from 'fs'
let idPerfix = ''
const svgTitle = /<svg([^>+].*?)>/
const clearHeightWidth = /(width|height)="([^>+].*?)"/g
const hasViewBox = /(viewBox="[^>+].*?")/g
const clearReturn = /(\r)|(\n)/g
function svgFind(dir) {
const svgRes = []
const dirents = readdirSync(dir, {
withFileTypes: true
})
for (const dirent of dirents) {
if (dirent.isDirectory()) {
svgRes.push(...svgFind(`${dir + dirent.name}/`))
} else {
const svg = readFileSync(dir + dirent.name)
.toString()
.replace(clearReturn, '')
.replace(svgTitle, ($1, $2) => {
let width = 0
let height = 0
let content = $2.replace(clearHeightWidth, (s1, s2, s3) => {
if (s2 === 'width') {
width = s3
} else if (s2 === 'height') {
height = s3
}
return ''
})
if (!hasViewBox.test($2)) {
content += `viewBox="0 0 ${width} ${height}"`
}
return `<symbol id="${idPerfix}-${dirent.name.replace('.svg', '')}" ${content}>`
})
.replace('</svg>', '</symbol>')
svgRes.push(svg)
}
}
return svgRes
}
export const svgBuilder = (path, perfix = 'icon') => {
if (path === '') return
idPerfix = perfix
const res = svgFind(path)
return {
name: 'svg-transform',
transformIndexHtml(html) {
return html.replace(
'<body>',
`
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position: absolute; width: 0; height: 0">
${res.join('')}
</svg>
`
)
}
}
}
g)配置vite.config.js文件,使svgBuilder.js文件功能启用
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { svgBuilder } from './src/icons/svgBuilder'
// https://vitejs.dev/config/
export default defineConfig({
base: './',
plugins: [
vue(),
svgBuilder('./src/icons/svg/') // 这里已经将src/icons/svg/下的svg全部导入
]
})
h)修改App.vue文件,编写测试示例
<template>
<img alt="Vue logo" src="@/assets/logo.png" />
<div>
<svg-icon icon-class="login-user" />
</div>
<router-view />
</template>
<script>
export default {
name: 'App'
}
</script>
3.3.查看效果:启动项目,命令:npm run dev。
二、总结
通过《vite+vue3》和《vite+vue3 2》两篇文章的记录,基本上把web开发中使用的基础模块和常用插件都记录了。
三、参考信息
1.https://blog.csdn.net/z591102/article/details/106787171/
2.https://juejin.cn/post/6991233820410249252
3.https://juejin.cn/post/6973288527802925092