prettier、eslint、stylelint在项目中使用

1. prettier
   1）vscode中使用
   a. 安装插件(Prettier)

安装成功后，在你打开支持的文件时，下方文件信息状态栏会有prettier标致：

双击它或者直接在输出命令窗口那里查看prettier的日志信息：

从日志这里可以看出，它是优先使用项目中的prettier配置的。
另外，一般你下载代码格式化插件，都是搭配vscode的文件自动保存格式的（这样方便），但是注意，这个自动保存格式化使用的是文件的默认格式化配置。

b. vscode配置
格式化的默认配置修改为prettier。

开启格式化自动保存。

最后记得要重启vscode

注意：当配置发生变化的时候也要重启vscode

2）项目中使用
a. 新建配置（.prettierrc.cjs 或者.prettier.json）,下面以.prettierrc.cjs为例

module.exports = {printWidth: 150, // 每行代码长度（默认80）tabWidth: 2, // 缩进空格数useTabs: false, //不用tab缩进semi: true, //// 在语句末尾打印分号singleQuote: true, // 使用单引号而不是双引号vueIndentScriptAndStyle: true, //Vue文件脚本和样式标签缩进quoteProps: 'as-needed', // 更改引用对象属性的时间 可选值"<as-needed|consistent|preserve>"jsxSingleQuote: true, // 在JSX中使用单引号而不是双引号trailingComma: 'es5', //多行时尽可能打印尾随逗号。（例如，单行数组永远不会出现逗号结尾。） 可选值"<none|es5|all>"，默认nonebracketSpacing: true, // 在对象文字中的括号之间打印空格jsxBracketSameLine: false, //jsx 标签的反尖括号需要换行arrowParens: 'always', // 在单独的箭头函数参数周围包括括号 always：(x) => x \ avoid：x => xrangeStart: 0, // 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码rangeEnd: Infinity,requirePragma: false, // 指定要使用的解析器，不需要写文件开头的 @prettierinsertPragma: false, // 不需要自动在文件开头插入 @prettierproseWrap: 'preserve', // 使用默认的折行标准 always\never\preservehtmlWhitespaceSensitivity: 'css', // 指定HTML文件的全局空格敏感度 css\strict\ignoreendOfLine: 'auto', // 因为prettier的规范和eslint的换行规则不同，所以这个必须配置。要不然每次打开文件都会有一堆的警告;换行符使用 lf 结尾是 可选值"<auto|lf|crlf|cr
};

b. package.json增加配置

"lint:prettier": "prettier --write \"src/**/*.{js,ts,json,tsx,css,scss,vue,html,md}\""

c. 执行 npm run lint:prettier

2. eslint