珠海seo网站建设,济南企业建站平台,app手机应用开发公司,网站建设海报素材图片在项目团队开发过程中#xff0c;多人协同开发为保证项目格式书写格式统一标准化#xff0c;因此需要进行代码格式化校验#xff0c;包括在代码编写过程中以及代码提交前进行自动格式化#xff0c;因此需要进行在项目中进行相关的配置使之代码格式一致。
一、eslint配置 … 在项目团队开发过程中多人协同开发为保证项目格式书写格式统一标准化因此需要进行代码格式化校验包括在代码编写过程中以及代码提交前进行自动格式化因此需要进行在项目中进行相关的配置使之代码格式一致。
一、eslint配置
eslint是提供一个插件化的javascript代码检测工具。
安装eslint
pnpm i eslint -D
生成配置文件执行如下命令后自动生成对应的配置文件eslint.cjs nps eslint --init
执行命令后根据提示选择如下配置完成文件生成 添加eslint校验规则
module.exports {// 环境配置env: {browser: true,//浏览器运行es2021: true},// 规则继承extends: [// 全部规则默认是关闭的该配置会开启推荐规则按照文档进行配置eslint:recommended,plugin:typescript-eslint/recommended,plugin:vue/vue3-essential],overrides: [{env: {node: true},files: [.eslintrc.{js,cjs}],parserOptions: {sourceType: script}}],parserOptions: {ecmaVersion: latest,parser: typescript-eslint/parser,sourceType: module},plugins: [typescript-eslint,vue],// eslint 规则rules: {no-var: error, // 禁止varno-multiple-empty-lines: [warn, {max: 1}], // 不允许多个空行no-useless-escape: off, // 关闭禁止不必要的转义字符// typeScripttypescript-eslint/no-unused-vars: error,typescript-eslint/no-explicit-any: off,// eslint-plugin-vuevue/multi-word-component-names: off, // 关闭名称只能-连接vue/no-mutating-props: off, // 关闭组件prop不能改变vue/attribute-hyphenation: off, // 关闭对模板中自定义组件强制执行属性命名样式}
}添加忽略校验文件配置创建文件.eslintignore
dist
node_modeules
添加运行脚本
在package.json 中新增运行脚本 scripts: {lint: eslint src,fix: eslint src --fix}, 二、配置prettier
eslint是针对javascript进行语法检测保证程序的准确运行preitter是对代码格式进行统一格式化的工具保证项目格式一致美观
1、安装依赖包 pnpm install -D eslint-plugin-prettier prettier eslint-config-prettier
2、添加.preitterc.json文件
{singleQuote: true,semi: false,bracketSpacing: true,htmlWhitespaceSensitivity: ignore,endOfLine: auto,trailingComma: all,tabWidth: 2}
3、添加.prettierignore文件
/dist/*
/html/*
.local
/node_modules/**
**/*.svg
**/*.sh
/public/*
当代码不规范时执行如下就会提示错误 三、配置stylelintrc.cjs
1、安装依赖
pnpm add sass sass-loader stylelint postcss postcss-scss postcss-html stylelint-config-prettier stylelint-cnfig-recess-order stylelint-config-recommended-scss stylelint-config-standard stylelint-config-standard-vue stylelint-scss stylelint-order stylelint-config-standard-scss -D
2、配置.stylelintignore文件
/node_modules/*
/dist/*
/html/*
/public/*
3、配置.stylelintrc.cjs文件
// see https://stylelint.bootcss.com/module.exports {extends: [stylelint-config-standard, // 配置stylelint拓展插件stylelint-config-html/vue, // 配置 vue 中 template 样式格式化stylelint-config-standard-scss, // 配置stylelint scss插件stylelint-config-recommended-vue/scss, // 配置 vue 中 scss 样式格式化stylelint-config-recess-order, // 配置stylelint css属性书写顺序插件,stylelint-config-prettier, // 配置stylelint和prettier兼容],overrides: [{files: [**/*.(scss|css|vue|html)],customSyntax: postcss-scss,},{files: [**/*.(html|vue)],customSyntax: postcss-html,},],ignoreFiles: [**/*.js,**/*.jsx,**/*.tsx,**/*.ts,**/*.json,**/*.md,**/*.yaml,],/*** null 关闭该规则* always 必须*/rules: {value-keyword-case: null, // 在 css 中使用 v-bind不报错no-descending-specificity: null, // 禁止在具有较高优先级的选择器后出现被其覆盖的较低优先级的选择器function-url-quotes: always, // 要求或禁止 URL 的引号 always(必须加上引号)|never(没有引号)no-empty-source: null, // 关闭禁止空源码selector-class-pattern: null, // 关闭强制选择器类名的格式property-no-unknown: null, // 禁止未知的属性(true 为不允许)block-opening-brace-space-before: always, //大括号之前必须有一个空格或不能有空白符value-no-vendor-prefix: null, // 关闭 属性值前缀 --webkit-boxproperty-no-vendor-prefix: null, // 关闭 属性前缀 -webkit-maskselector-pseudo-class-no-unknown: [// 不允许未知的选择器true,{ignorePseudoClasses: [global, v-deep, deep], // 忽略属性修改element默认样式的时候能使用到},],},
}
