标签：str exports 地址 vscode 换行符 写文件 nod 多个 解析
eslint prettier stylelint husky lint-staged typescript babel-eslint eslint-config-airbnb-baseeslint-config-alloy 为构建项目代码质量保驾护航。
二、什么是代码检查
三、配置 ESLint
1、新建一个文件夹，打开命令行 npm init -y 创建属于新项目的 package.json
2、安装依赖 npm i eslint babel-eslint eslint-config-alloy -S （这里以腾讯eslint库为例，eslint-config-airbnb-base 为 airbnb 团队的 eslint 库 ）
3、在项目根目录下创建一个 .eslintrc.js 或者 .eslintrc.json 的配置文件，如下：
// .eslintrc.js module.exports = { extends: [ ‘babel-eslint‘, ], };
4、在项目根目录下创建一个index.js，复制下面内容：
var myName = ‘Jack‘ console.log(`My name is ${myNane}`)
5、在命令行输入 npx eslint index.js , 当使用 npx 时，webpack 会自动去找 node_modules中的 eslint/lib/index，（npm 需要指定地址）从而执行命令
// eslint 报错信息： ? 2 problems (2 errors, 0 warnings) error Unexpected var, use let or const instead no-var error ‘myNane‘ is not defined no-undef
6、使用 npx eslint index.js --fix自动修复某些规则
// 这时 var 变成了 let // 还剩下一个无法自动修复的错误 ? 1 problem (1 error, 0 warnings) error ‘myNane‘ is not defined no-undef
四、配合 TypeScript
1、由于 ESLint 默认使用 Espree 进行语法解析，无法识别 TypeScript 的一些语法，故我们需要安装 @typescript-eslint/parser，替代掉默认的解析器，别忘了同时安装 typescript：
npm install --save-dev typescript @typescript-eslint/parser
2、接下来需要安装对应的插件 @typescript-eslint/eslint-plugin 它作为 eslint 默认规则的补充，提供了一些额外的适用于 ts 语法的规则。
npm install --save-dev @typescript-eslint/eslint-plugin
3、修改配置文件
module.exports = { extends: [ ‘alloy‘, ], parser: ‘@typescript-eslint/parser‘, plugins: [‘@typescript-eslint‘], rules: { // 禁止使用 var ‘no-var‘: "error" } }
4、新建index.ts文件：
var myName = ‘Tom‘; console.log(`My name is ${myNane}`); console.log(`My name is ${myName.toStrng()}`); type Foo = {};
5、在命令行输入npx eslint index.ts，如下可以看到报错信息以及可修复项
1:1 error Unexpected var, use let or const instead no-var 2:27 error ‘myNane‘ is not defined no-undef 4:6 error Use an `interface` instead of a `type` @typescript-eslint/consistent-type-definitions ? 3 problems (3 errors, 0 warnings) 2 errors and 0 warnings potentially fixable with the `--fix` option.
1、根目录新建一个src文件夹，将我们的index.js和index.ts放进去
2、在package.json中的scripts新增：
{ "scripts": { // 因为eslint不是全局安装的，所以要使用npx "lint": "npx eslint src --ext .js,.ts,tsx" // eslint 默认不会检查 .ts 后缀的文件，所以需要加上参数 --ext .ts } }
3、然后npm run lint就可以看到src下所有指定后缀文件的报错信息
1、安装技术栈相关依赖
// Eslint npm install --save-dev eslint babel-eslint eslint-config-alloy // React npm install --save-dev eslint babel-eslint eslint-plugin-react eslint-config-alloy // Vue npm install --save-dev eslint babel-eslint vue-eslint-parser eslint-plugin-vue eslint-config-alloy // TypeScript npm install --save-dev eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-alloy // TypeScript React npm install --save-dev eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react eslint-config-alloy
2、配置.eslintrc.js文件
/* .eslintrc.js */ module.exports = { extends: [ ‘alloy‘, // 都需要 ‘alloy/vue‘, //vue项目需要 ‘alloy/react‘, //react项目需要 ‘alloy/typescript‘, //ts项目需要 ], env: { // 你的环境变量（包含多个预定义的全局变量） // // browser: true, // node: true, // mocha: true, // jest: true, // jquery: true }, globals: { // 你的全局变量（设置为 false 表示它不允许被重新赋值） // // myGlobal: false }, rules: { // 自定义你的规则 } };
3、接下来就可以直接用eslint命令检查文件了
4、这样就引入了alloy团队的lint规则了，然后可以用rules覆盖你不爽的规则，直接采用开源规则是为了避免重复造轮子，你也可以选择别的团队，或者自己定义一套
Prettier 是一个代码格式化工具，相比于 ESLint 中的代码格式规则，它提供了更少的选项，但是却更加专业。
AlloyTeam 推荐用 Prettier 管理格式化相关的规则，用 ESLint 来检查它更擅长的逻辑错误。
1、安装 Prettier
npm install -S prettier
2、配置 .prettierrc.js 仅供参考：
// .prettierrc.js module.exports = { // 一行最多 100 字符 printWidth: 100, // 使用 4 个空格缩进 tabWidth: 4, // 不使用缩进符，而使用空格 useTabs: false, // 行尾需要有分号 semi: true, // 使用单引号 singleQuote: true, // 对象的 key 仅在必要时用引号 quoteProps: ‘as-needed‘, // jsx 不使用单引号，而使用双引号 jsxSingleQuote: false, // 末尾不需要逗号 trailingComma: ‘none‘, // 大括号内的首尾需要空格 bracketSpacing: true, // jsx 标签的反尖括号需要换行 jsxBracketSameLine: false, // 箭头函数，只有一个参数的时候，也需要括号 arrowParens: ‘always‘, // 每个文件格式化的范围是文件的全部内容 rangeStart: 0, rangeEnd: Infinity, // 不需要写文件开头的 @prettier requirePragma: false, // 不需要自动在文件开头插入 @prettier insertPragma: false, // 使用默认的折行标准 proseWrap: ‘preserve‘, // 根据显示样式决定 html 要不要折行 htmlWhitespaceSensitivity: ‘css‘, // 换行符使用 lf endOfLine: ‘lf‘ };
1、在.vscode/settings.json中添加配置：
{ // 保存时自动格式化所有支持文件 javascript/javascriptreact/typescript/typescriptreact/json/graphql "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode", }
2、这时我们保存文件的时候，已经可以自动格式化了
3、也可以指定格式化文件类型：
{ // Set the default "editor.formatOnSave": false, // Enable per-language "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true } }
标签：str exports 地址 vscode 换行符 写文件 nod 多个 解析
原文地址：https://www.cnblogs.com/chase-star/p/13373212.html
