vue3+vite 项目中配置prettier
遵循一致的代码规范能够显著增强代码可读性、可维护性，使得代码结构简洁清晰，还能减少bug的出现。为了防止Prettier和ESLint格式化功能冲突，还需要安装 eslint-config-prettier 来关闭ESLint中的代码格式化功能。在 .prettierignore 和 .eslintignore 文件中可以添加那些不需要格式化的文件或文件夹，在美化代码挑bug时忽略这些文件。美化代
·
良好的代码规范无论是对个人还是团队都是十分重要的。遵循一致的代码规范能够显著增强代码可读性、可维护性，使得代码结构简洁清晰，还能减少bug的出现。对于团队开发来说，还能减少部分沟通成本，让大家都专注于功能开发上。
Prettier 简介
Prettier 是一款代码格式美化工具，用于统一代码风格，提高代码可维护性。
ESLint
- 内置规则和自定义规则共用一套规则 API
- 内置的格式化方法和自定义的格式化方法共用一套格式化 API
- 额外的规则和格式化方法能够在运行时指定
- 规则和对应的格式化方法并不强制捆绑使用
ESLint 结合 Prettier 使用
美化代码结构的Prettier，检查代码质量的ESLint，强强结合会碰撞出什么样的火花呢？
1. 安装
要使用ESLint和Prettier当然先得安装他们啦，然后还需要安装 eslint-plugin-prettier。
为了防止Prettier和ESLint格式化功能冲突，还需要安装 eslint-config-prettier 来关闭ESLint中的代码格式化功能
npm install --save-dev --save-exact prettier
npm install eslint --save-dev
npm install --save-dev eslint-plugin-prettier
npm install --save-dev eslint-config-prettier
在 .prettierignore 和 .eslintignore 文件中可以添加那些不需要格式化的文件或文件夹，在美化代码挑bug时忽略这些文件。
// .prettierignore
/dist/*
.local
.output.js
/node_modules/**
**/*.svg
**/*.sh
/public/*
// .eslintignore
*.sh
node_modules
*.md
*.woff
*.ttf
.vscode
.idea
dist
/public
/docs
.husky
.local
/bin
Dockerfile
2. 配置
ESLint中添加Prettier插件的配置文件
.eslintrc.js
// .eslintrc.js
// @ts-check
const { defineConfig } = require('eslint-define-config');
module.exports = defineConfig({
root: true,
env: {
browser: true,
node: true,
es6: true,
},
parser: 'vue-eslint-parser',
parserOptions: {
parser: '@typescript-eslint/parser',
ecmaVersion: 2020,
sourceType: 'module',
jsxPragma: 'React',
ecmaFeatures: {
jsx: true,
},
},
extends: [
"eslint:recommended",
"plugin:vue/vue3-essential",
"plugin:@typescript-eslint/recommended",
"prettier",
],
rules: {
'vue/script-setup-uses-vars': 'error',
'@typescript-eslint/ban-ts-ignore': 'off',
'@typescript-eslint/explicit-function-return-type': 'off',
'@typescript-eslint/no-explicit-any': 'off',
'@typescript-eslint/no-var-requires': 'off',
'@typescript-eslint/no-empty-function': 'off',
'vue/custom-event-name-casing': 'off',
'no-use-before-define': 'off',
'@typescript-eslint/no-use-before-define': 'off',
'@typescript-eslint/ban-ts-comment': 'off',
'@typescript-eslint/ban-types': 'off',
'@typescript-eslint/no-non-null-assertion': 'off',
'@typescript-eslint/explicit-module-boundary-types': 'off',
'@typescript-eslint/no-unused-vars': [
'error',
{
argsIgnorePattern: '^_',
varsIgnorePattern: '^_',
},
],
'no-unused-vars': [
'error',
{
argsIgnorePattern: '^_',
varsIgnorePattern: '^_',
},
],
'space-before-function-paren': 'off',
'vue/attributes-order': 'off',
'vue/v-on-event-hyphenation': 'off',
'vue/multi-word-component-names': 'off',
'vue/one-component-per-file': 'off',
'vue/html-closing-bracket-newline': 'off',
'vue/max-attributes-per-line': 'off',
'vue/multiline-html-element-content-newline': 'off',
'vue/singleline-html-element-content-newline': 'off',
'vue/attribute-hyphenation': 'off',
'vue/require-default-prop': 'off',
'vue/html-self-closing': [
'error',
{
html: {
void: 'always',
normal: 'never',
component: 'always',
},
svg: 'always',
math: 'always',
},
],
},
});
prettier.config.js
// prettier.config.js
module.exports = {
// 一行最多多少个字符
printWidth: 150,
// 指定每个缩进级别的空格数
tabWidth: 2,
// 使用制表符而不是空格缩进行
useTabs: true,
// 在语句末尾是否需要分号
semi: true,
// 是否使用单引号
singleQuote: true,
// 更改引用对象属性的时间 可选值"<as-needed|consistent|preserve>"
quoteProps: 'as-needed',
// 在JSX中使用单引号而不是双引号
jsxSingleQuote: false,
// 多行时尽可能打印尾随逗号。（例如，单行数组永远不会出现逗号结尾。） 可选值"<none|es5|all>"，默认none
trailingComma: 'es5',
// 在对象文字中的括号之间打印空格
bracketSpacing: true,
// jsx 标签的反尖括号需要换行
jsxBracketSameLine: false,
// 在单独的箭头函数参数周围包括括号 always：(x) => x \ avoid：x => x
arrowParens: 'always',
// 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码
rangeStart: 0,
rangeEnd: Infinity,
// 指定要使用的解析器，不需要写文件开头的 @prettier
requirePragma: false,
// 不需要自动在文件开头插入 @prettier
insertPragma: false,
// 使用默认的折行标准 always\never\preserve
proseWrap: 'preserve',
// 指定HTML文件的全局空格敏感度 css\strict\ignore
htmlWhitespaceSensitivity: 'css',
// Vue文件脚本和样式标签缩进
vueIndentScriptAndStyle: false,
//在 windows 操作系统中换行符通常是回车 (CR) 加换行分隔符 (LF)，也就是回车换行(CRLF)，
//然而在 Linux 和 Unix 中只使用简单的换行分隔符 (LF)。
//对应的控制字符为 "\n" (LF) 和 "\r\n"(CRLF)。auto意为保持现有的行尾
// 换行符使用 lf 结尾是 可选值"<auto|lf|crlf|cr>"
endOfLine: 'auto',
};
**3.VSCode 配置 ESLint Prettier **
在VSCode 中使用ESLint 和Prettier需要先安装下插件。
ESLint，Prettier
之后需要在 setting.json 中配置
//配置prettier
"editor.minimap.enabled": false,
// "editor.formatOnPaste": true,
"editor.formatOnSave": true,
"editor.lineNumbers": "on",
"editor.quickSuggestions": {
"other": true,
"comments": true,
"strings": true
},
"eslint.run": "onSave",
"editor.codeActionsOnSave": {
"source.fixAll": false,
"source.fixAll.eslint": true //保存自动修复
},
"prettier.useTabs": false, //使用制表符缩进
"prettier.semi": false, //去掉代码结尾的分号
"prettier.singleQuote": true, //使用单引号替代双引号
"prettier.trailingComma": "none", //去除对象最末尾元素跟随的逗号
"prettier.printWidth": 200, //指定代码长度，超出换行
"prettier.requireConfig": false, //需要prettier.requireConfig格式化
"prettier.useEditorConfig": false,
"prettier.eslintIntegration": true, //不让prettier使用eslint的代码格式进行校验
"javascript.format.insertSpaceBeforeFunctionParenthesis": true, //让函数(名)和后面的括号之间加个空格
"vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html
"vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned" //属性强制折行对齐
}
},
"path-autocomplete.extensionOnImport": true,
"path-autocomplete.pathMappings": {
"@": "${folder}/src"
},
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
},
"eslint.validate": ["javascript", "javascriptreact", "html", "vue"],
"eslint.options": {
"plugins": ["html"]
},
"prettier.documentSelectors": ["settings"],
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.tabSize": 2,
"editor.formatOnPaste": true,
"eslint.format.enable": true,
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
以上是我本地项目的配置，好用给个赞❤️
前往低代码交流专区
更多推荐
4
0- 0
已为社区贡献1条内容
所有评论(0)