Nuxt项目支持eslint+pritter+typescript的实现
脚手架安装好nuxt的基本项目
npx create-nuxt-app <项目名>，如：npx create-nuxt-app nuxt-ts，按照提示安装你想要的东西，本次项目预装： universal模式下koa+pwa+linter+prettier+axios ，默认的项目目录如下：
eslint + prettier + vscode 保存自动格式化&修复
本人习惯缩进为4个空格，但是eslint&nuxt生成的项目默认为2个，因此需要更改配置
-
.editorconfig文件下的indent_size: 2更改为indent_size: 4 .vscode/settings.json
{
// 保存时eslint自动修复错误
"eslint.autofixonsave": true,
// 保存自动格式化
"editor.formatonsave": true,
// 开启 eslint 支持
"prettier.eslintintegration": true,
// prettier配置 --- 使用单引号【与.prettierrc下的配置对应】
"prettier.singlequote": true,
//prettier配置 --- 结尾不加分号 【与.prettierrc下的配置对应】
"prettier.semi": false,
//prettier配置 --- 每行最多显示的字符数 【与.prettierrc下的配置对应】
"prettier.printwidth": 120,
//.vue文件template格式化支持，并使用js-beautify-html插件
"vetur.format.defaultformatter.html": "js-beautify-html",
//js-beautify-html格式化配置，属性强制换行
"vetur.format.defaultformatteroptions": {
"js-beautify-html": {
// "wrap_attributes": "force-aligned"
}
},
//根据文件后缀名定义vue文件类型
"files.associations": {
"*.vue": "vue"
},
//配置 eslint 检查的文件类型
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autofix": true
},
{
"language": "typescript",
"autofix": true
}
],
"files.autosave": "onfocuschange",
"vetur.format.enable": false,
"vetur.experimental.templateinterpolationservice": true,
"editor.detectindentation": false
}
.prettierrc文件
{
"singlequote": true, // 使用单引号 `.vscode/settings.json` 的`prettier.semi`
"semi": false, // 结尾不加分号 `.vscode/settings.json` 的`prettier.semi`
"printwidth": 120 // 此项为我自加以上两项为默认，表示每行最多显示的字符数，默认为80，本人觉得太短了，因此修改了一下，必须与`.vscode/settings.json` 的`prettier.printwidth`对应上
/* 更多配置请戳 https://prettier.io/docs/en/options.html */
}
.eslintrc.js文件配置
module.exports = {
root: true,
env: {
browser: true,
node: true
},
parseroptions: {
parser: 'babel-eslint'
},
extends: [
'@nuxtjs',
'plugin:nuxt/recommended',
'plugin:prettier/recommended',
'prettier',
'prettier/vue'
],
plugins: ['prettier'],
// add your custom rules here
rules: {
'nuxt/no-cjs-in-config': 'off',
indent: ['error', 4] // 4个空格缩进
/* 更多配置请戳 http://eslint.cn/docs/rules/ */
}
}
nuxt.config.js文件下 build.extend(config, ctx) {}添加options.fix: true
build: {
/*
** you can extend webpack config here
*/
extend(config, ctx) {
// run eslint on save
if (ctx.isdev && ctx.isclient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/,
options: {
fix: true
}
})
}
}
}
开始改造工程支持typescript
安装所需插件
- npm i -d @nuxt/typescript ts-node @typescript-eslint/eslint-plugin
- npm install -s vue-class-component vue-property-decorator
修改&添加配置
package.json
添加或编辑package.json的lint脚本："lint": "eslint --ext .ts,.js,.vue --ignore-path .gitignore ."
修改package.json 的 dev 脚本中 server/index.js 为 server/index.ts
"dev": "cross-env node_env=development nodemon server/index.ts --watch server",
tsconfig.json
项目目录下新建tsconfig.json文件后，在package.json文件下添加："start-dev": "nuxt" 脚本命令，运行npm run dev就会使用默认值自动更新此配置文件
.eslintrc.js
修改.eslintrc.js文件 parseroptions.parser: '@typescript-eslint/parser'
parseroptions: {
parser: '@typescript-eslint/parser'
},
修改.eslintrc.js文件 plugins添加'@typescript-eslint'
plugins: ['prettier', '@typescript-eslint'],
nuxt.config.js
修改nuxt.config.js文件后缀为 nuxt.config.ts
修改nuxt.config.ts的build.extend
{
test: /\.ts$/,
exclude: [/node_modules/, /vendor/, /\.nuxt/],
loader: 'ts-loader',
options: {
appendtssuffixto: [/\.vue$/],
transpileonly: true
}
}
server/index.js
修改server/index.js文件后缀为 server/index.ts
修改server/index.ts中的
const config = require('../nuxt.config.js')
// 为
const config = require('../nuxt.config.ts')
修改vue文件为typescript语法
<script>
import logo from '~/components/logo.vue'
export default {
components: {
logo
}
}
</script>
typescript 语法如下：
<script lang="ts">
import { component, vue } from 'vue-property-decorator'
import logo from '~/components/logo.vue'
@component({
components: {
logo
},
middleware: 'check-auth'
})
export default class indexpage extends vue {}
</script>
坑点
vetur 报错 cannot find module 'xxxx'
解决方案：import 路径 需要写清楚后缀
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。