VScode代码Prettier格式化及ESLint语法检测

一、安装以下三个扩展程序

1.ESLint

● javascript代码检语法测工具，可以配置每次保存时格式化js
● 每次保存时只格式化部分代码，需要连续按住Ctrl+S多次才能格式化完成

2.Prettier - Code formatter

● 只关注格式化，并不具有eslint检查语法等能力，
● 支持JavaScript · Flow · TypeScript · CSS · SCSS · Less · JSX · Vue · GraphQL · JSON · Markdown

Prettier 的一些主要默认配置选项：

属性名	默认值	备注
printWidth	80	控制每行代码的最大字符数。
tabWidth	2	设置每个缩进级别的空格数。
useTabs	false	控制是否使用制表符 (\t) 代替空格进行缩进。
semi	true	决定是否在语句末尾添加分号。
singleQuote	false	如果为 true，则 Prettier 使用单引号而不是双引号。
quoteProps	“as-needed”	控制对象属性是否需要引号。
jsxSingleQuote	false	如果为 true，则在 JSX 中使用单引号。
trailingComma	“es5”	控制尾随逗号的使用。选项包括 “es5”, “none”, 和 “all”。
bracketSpacing	true	如果为 true，则在对象属性的括号前后添加空格。
jsxBracketSameLine	false	如果为 true，则在 JSX 中将 > 放在最后一对属性后的同一行上。
arrowParens	“always”	控制箭头函数中括号的使用。选项包括 “always” 和 “avoid”。
rangeStart	0	格式化代码时的起始行号。
rangeEnd	Infinity	格式化代码时的结束行号。
parser	null	指定解析器，用于解析不同的语言或框架。
filepath	null	指定文件路径，Prettier 会根据文件扩展名选择相应的解析器。
requirePragma	false	如果为 true，只有包含特定注释的代码块才会被格式化。
insertPragma	false	如果为 true，Prettier 会在文件顶部添加一个特殊的注释，以启用 Prettier 格式化。
proseWrap	“preserve”	控制散文（非代码）元素的换行。选项包括 “always”, “never”, 和 “preserve”。
htmlWhitespaceSensitivity	“css”	控制 HTML 文件中空白的处理方式。选项包括 “css”, “strict”, 和 “ignore”。
endOfLine	“lf”	控制行尾字符。选项包括 “auto”, “lf”, “crlf”, 和 “cr”。

3.Vetur

● 支持格式化html、标准css、标准js、vue文件

二、配置setting.json

1.打开setting.json文件

2.编辑setting.json文件

{
	"editor.formatOnType": true, //编辑时是否自动格式化
    "editor.formatOnSave": true, //保存时是否自动格式化
    "editor.formatOnPaste": true, //粘贴时是否自动格式化
    "editor.wordWrapColumn": 500, //视图每行最大字符数
    "editor.wordWrap": "wordWrapColumn", //视图自动换行控制(视觉上折行，不增加代码行数)，超出wordWrapColumn设置的值折行
    "editor.renderIndentGuides": false, //编写代码时是否给出对齐连线
    //"editor.codeActionsOnSave": { 
    //    "source.fixAll.eslint": true // 代码保存时按照eslint规则修复
    //},
    "editor.tabSize": 2, // tab默认两个空格
    "prettier.semi": true, //是否添加结束分号
    "prettier.singleQuote": true, //是否使用单引号
    "prettier.trailingComma": "none", // 是否在末尾自动添加逗号
    "prettier.tabWidth": 4, //tab缩进为4个空格字符
    "prettier.printWidth": 500, //代码每行最大字符数，超出换行(会增加行数)
    "vetur.format.options.tabSize": 4, //tab缩进为4个空格
    "vetur.format.defaultFormatter.html": "js-beautify-html", //html格式化规则(解决属性换行问题)
    "vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化(解决属性换行问题)
    "vetur.format.defaultFormatter.ts": "vscode-typescript", //让vue中的ts按编辑器自带的ts格式进行格式化(解决属性换行问题) 
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": { //vue文件html相关
            "wrap_attributes": "aligned-multiple" //以下为取值说明
            // - auto: 仅在超出行长度时才对属性进行换行。
            // - force: 对除第一个属性外的其他每个属性进行换行。
            // - force-aligned: 对除第一个属性外的其他每个属性进行换行，并保持对齐。
            // - force-expand-multiline: 对每个属性进行换行。
            // - aligned-multiple: 当超出折行长度时，将属性进行垂直对齐。
        },
        "prettyhtml": { //vue文件html相关
            "printWidth": 500, //每行最大字符数，超出换行(会增加行数)
            "singleQuote": false, //是否使用单引号
            "wrapAttributes": false, //属性换行
            "sortAttributes": false  //属性排序
        },
        "prettier": { //vue文件js相关
            "semi": true, //是否添加结束分号
            "singleQuote": true //是否使用单引号
        }
    },
    
    "vetur.validation.template": false, //是否检测模板中的语法
}

或

{
  "editor.formatOnSave": true, // 每次保存自动格式化
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true // 每次保存的时候将代码按eslint格式进行修复
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode" // vue文件默认格式化方式
  },
  // vetur格式化配置
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.options.tabSize": 2,
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "auto"
    }
  },
  "vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true, // 函数前加上空格 只有在默认vetur的时候生效
  // js文件默认格式化方式 和vue中的js保持一致使用编辑器自带的ts格式
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode" // js文件默认格式化方式prettier
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode" // json文件默认格式化方式prettier
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"  // css文件默认格式化方式prettier
  },
  
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode" // typescript文件默认格式化方式prettier
  },
  "editor.fontSize": 16, // 字体大小
  "editor.wordWrap": "on", // 控制折行方式 - "on" (根据视区宽度折行)
  "editor.tabSize": 2, // 换行默认以tab缩进 2个字符
  "editor.colorDecorators": false, // 控制编辑器是否显示内联颜色修饰器和颜色选取器。
  "editor.snippetSuggestions": "top", // 将建议的代码段优先级提前选择，比如输入for第一个提示是for循环代码段。
  "files.associations": {
    // 文件关联语言的优先级配置
    "*.js": "javascriptreact",
    "*.vue": "vue",
    "*.cshtml": "html",
    "*.dwt": "html"
  },
  "window.zoomLevel": -1,
  "files.autoSave": "onFocusChange",
  "editor.formatOnPaste": true
}

如果prettier默认格式化规则不符合要求，在项目根目录创建.prettierrc.json文件覆盖默认格式化规则

.prettierrc.json

{
  "singleQuote": true,
  "semi": true,
  "trailingComma": "all", // 数组、对象属性最后加逗号
  "arrowParens": "always" // 箭头函数参数总是用括号包起来
}

三、eslint语法检测

请看另一篇文章：https://blog.csdn.net/lihefei_coder/article/details/92540985